Since long before have I realized I do need a more official and moreacademic homepage in addition to a personal blog site, but I didn’t findtime to do it until I started working. Now after this switch, I have mypersonal homepage of <ahref="https://github.com/alshedivat/al-folio/">al-folio</a> in <ahref="https://jekyllrb.com/">Jekyll</a> and at the same time my blog ofarcher inHexo.
<h2 id="migrating-hexo-blog-to-sub-directory">Migrating Hexo Blog toSub-Directory</h2><p>I want to keep this <ahref=”https://github.com/fi3ework/hexo-theme-archer/”>archer theme</a>for my blog while creating a new personal homepage. Therefore, I have tomove this repo out of the GitHub page repo and into some other blogrepo. That is, this blog will now be served as a GitHub project page,like my ARC40. What needs to be done was surprisingly simple:</p><ol type="1"><li><p>Create a GitHub repo to store your webpages: This repo willcontain the exact same information as my previous <ahref=”https://github.com/Yao-Lirong/Yao-Lirong.github.io”>Yao-Lirong/Yao-Lirong.github.io</a>.I created <ahref=”https://github.com/Yao-Lirong/blog”>Yao-Lirong/blog</a>.</p></li><li><p>Change your Hexo _config.yml. You can reference theofficial guide ondeploying, but they didn’t mention how to one-command deploy aproject page.</p>
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre># URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://yao-lirong.github.io/blog
root: /blog/
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/Yao-Lirong/blog
branch: master
message: Updated at {{ now('YYYY-MM-DD HH:mm') }}
</pre></td></tr></table>hexo clean && hexo deploy</p></li></ol><h2 id="configuring-al-folio">Configuring al-folio</h2><h3 id="local-install">Local Install</h3><p>Since this migration was a long process, when I was working onal-folio, my archer page was still up and I have to first try outal-folio locally to not break my current GitHub page. To do this, theonly feasible way is to use docker as suggested in their <ahref=”https://github.com/alshedivat/al-folio/blob/master/INSTALL.md#local-setup-using-docker-recommended”>installinstruction</a>. Don’t bother to try other ways. You won’t have any luckrunning them.</p>
2
3
4
</pre></td><td class="code"><pre>git clone –depth 1 https://github.com/alshedivat/al-folio.git
cd al-folio/
docker compose pull
docker compose up
</pre></td></tr></table>_pages/*.md will be shown on the navigation bar. Ideleted most of them and only kept_pages/about.md, cv.md, projects.md</p></li><li><p>_news/ directory contains what will be shown on thehomepage “news” section. Do change those</p></li><li><p>_sass/_themes.scss has a variable--global-theme-color controlling the theme of this site. Ihad</p>
2
</pre></td><td class="code"><pre>–global-theme-color: #{$cyan-color};
–global-hover-color: #{$light-cyan-color};
</pre></td></tr></table>_config.yaml, we see that projectsis listed under collections. This means we can build thefollowing file structure, where we have _pages/projects.mdto be displayed on the navigation bar as an entry point andprojects/p1.md for a specific project. Find more aboutcollections in <ahref=”https://github.com/alshedivat/al-folio#collections”>README</a></p>
2
3
4
5
6
</pre></td><td class="code"><pre>_pages/
├─ projects.md - mywebsite.com/projects/
projects/
├─ p1.md - mywebsite.com/projects/p1
├─ p2.md - mywebsite.com/projects/p2
├─ ….
</pre></td></tr></table>rm -rf ./_posts/</p></li><li><p>Delete the template generating mywebsite.com/blogpage: rm -rf ./blog/</p></li><li><p>Comment out the following entries underJekyll Archives section and Blog section in_config.yml to make sure absolutely nothing is generatedunder mywebsite.com/blog address: (I was about to commentout everything, but it turns out this would break some contentgeneration features, so after some experiments I found you only need tocomment out the followings:)</p>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
</pre></td><td class="code"><pre># ———————————————–
# Blog
# ———————————————–
permalink: /blog/:year/:title/
related_blog_posts:
enabled: true
max_related: 5
# ———————————————–
# Jekyll Archives
# ———————————————–
jekyll-archives:
enabled: [year, tags, categories] # enables year, tag and category archives (remove if you need to disable one of them).
layouts:
year: archive-year
tag: archive-tag
category: archive-category
permalinks:
year: "/blog/:year/"
tag: "/blog/tag/:name/"
category: "/blog/category/:name/"
display_tags: ["formatting", "images", "links", "math", "code"] # these tags will be displayed on the front page of your blog
display_categories: ["blockquotes"] # these categories will be displayed on the front page of your blog
</pre></td></tr></table>blog entry on the navigation bar link to myactual blog address:</p><ol type="1"><li><p>set _config.yml blog_nav_title: to empty, so theal-folio’s blog entry will not show on the navigation bar,<ahref=”https://github.com/alshedivat/al-folio/issues/1328”>reference1</a>, <ahref=”https://github.com/alshedivat/al-folio/issues/67”>reference2</a></p></li><li><p>Find in _includes/header.html the if statement{% if site.blog_nav_title %} go to the end of this if statement andadd something: <ahref=”https://github.com/alshedivat/al-folio/discussions/579”>reference</a></p>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre>{% if site.blog_nav_title %}
<!– Blog –>
<!– Empty here because blog_nav_title attribute is empty –>
<li class="nav-item {% if page.url contains 'blog' %}active{% endif %}">
<a class="nav-link" href="{{ '/blog/' | relative_url }}">{{ site.blog_nav_title }}
{%- if page.url contains 'blog' -%}
<span class="sr-only">(current)</span>
{%- endif -%}
</a>
</li>
{%- endif %}
<!– Actual Blog Takes Place Here –>
<li class="nav-item">
<a class="nav-link" href="https://yao-lirong.github.io/blog/">blog</a>
</li>
</pre></td></tr></table>_config.yml: <ahref=”https://medium.com/@al-folio/displaying-external-posts-on-your-al-folio-blog-b60a1d241a0a”>reference</a></p>
2
3
</pre></td><td class="code"><pre>external_sources:
- name: blog
rss_url: https://yao-lirong.github.io/blog/atom.xml
</pre></td></tr></table>latest_posts: true in the front matter of_pages/about.md</p></li></ol><h2 id="tbd">TBD</h2><p>how about sitemap?</p><p>GA4 tags check</p><p>do a photowall?</p>