On the Building of This Site
Why?
The initial thought of building a personal blog came from a domain name. Out of pure coincidence the .com domain that is my name has not being purchased so I bought for my self. Intead of doing nothing with this domain, I thought it would be a good start to build a blog with my domain.
How?
Since I don’t want to have any spending other than domain, the most suitable approach was to host it on github pages with static pages. My blog is powered by Hexo, an open source blogging platform published under the MIT license.
Picking a Theme
I think the most important step to building a blog that you are satisfied with is choosing (or developing) the theme of your preference. Luckily, the Hexo community already have plenty of themes that you can choose from. For reference I chose this one (after struggling for an entire afternoon).
Tip: If you are also struggling like me, you can always opt for the most popular ones (NEXT and butterfly)
Installing (With Typography theme)
I am going to demonstrate using the theme that I selected.
Installing node.js, a code editor, and a Markdown editor
Go to https://nodejs.org/en/download and find the version that suits your OS and follow the instructions there.
I recommend installing a code editor (eg. vscode) for editing the files and deployment.
Optionally, for convinience, you can install a Markdown editor for writing your blogs.
Installing Hexo
Follow the instructions here to install Hexo.
Installing your theme
Most themes have a installation guide. Follow the guide and you should be fine. However, if your theme hasn’t been maintained for a while, you might run into compatibility issues.
For instance, my theme complained about my node version being too new. In this case you should follow the steps below to install a earlier version of node.js.
Install
nvm1
2
3
4
5
6
7
8
9
10
11
12# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
# Download and install Node.js: (v18.20.7 (LTS) is always a good choice)
nvm install [your desired version] # eg. nvm install 18
# Verify the Node.js version:
node -v # Should print "v18.20.6".
nvm current # Should print "v18.20.6".Reinstall Hexo and your theme in this new environment.
Deploying
Install
hexo-deployer-git1
npm install hexo-deployer-git --save
Add config
1
2
3
4
5
6
7
8
9
10
11deploy:
type: git
repo: <repository url>
branch: [branch]
token: ''
message: [message]
name: [git user]
email: [git email]
extend_dirs: [extend directory]
ignore_hidden: false # default is true
ignore_pattern: regexp # whatever file that matches the regexp will be ignored when deployingGenerate static htmls
1
2hexo g #generate
hexo s #start server for previewDeploy
1
hexo d #deploy
when you have github pages setup, you should have your websites updated automatically.
Adding a About Me page
Essentially, a about me page is just a hexo page. After this page is created, you just need to hyperlink it to the navigaton bar.
Note: For some Hexo themes, the about me page can be added just by telling Hexo the directory of the page in the config file. However, this theme does not have such functionality. We need to add the link mannually by code.
Here is the final look:
Add a page
1
hexo new page "your page name"
Edit your page in the
/sourcedirectoryModify the source code of the theme
In the
layout/partialdirectory of the theme folder, editnav.pug1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19div#site-nav.site-title-links
ul
li
if is_home()
a.current(href=config.root)= __('Home')
else
a(href=config.root)= __('Home')
li
if is_archive()
a.current(href=config.root + config.archive_dir)= __('Archive')
else
a(href=config.root + config.archive_dir)= __('Archive')
// Add the about me page to the navigation bar
li
if is_current('AboutMe/')
a.current(href=config.root + 'AboutMe/index.html')= __()
else
a(href=config.root + 'AboutMe/index.html')= __()
And there you have it, your blog! Enjoy writing!
In future articles ,we will talk about how to add a gallery function to this theme.