Xiao Wu
0%

Deploying a Blog Using Hexo/Next

Posted on

Install npm and hexo

1
2
3
$ sudo apt update
$ sudo apt install nodejs npm
$ npm install -g hexo-cli

Install and update next theme

See hexo github.

1
2
3
# Installation
$ cd [Blog_Folder]
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

1
2
3
# Update
$ cd [Blog_Folder]/themes/next
$ git pull

Hexo commands

See Official Documentation.

1
2
3
4
5
6
7
8
9
10
# New post
$ hexo new <title> 
# Clean `publish` folder
$ hexo clean 
# Generates static files
$ hexo generate # or hexo g
# Starts a local server. By default, this is at http://localhost:4000/
$ hexo server # or hexo s
# Deploy the `publish` folder to github
$ hexo deploy # or hexo d

Personalization of next theme

In themes/next/_config.yml, I selected the two-column Pisces theme, enabled social icons, added rounded avatar of myself, set text-align to left, and changed the icon between year and copyright info to a groom. There are also other minor changes which are not listed below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
scheme: Pisces
...
# Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-broom
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    # color: "#ff0000"
...
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/me_compressed.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false
...
social:
  Zurich: https://www.google.ch/maps/place/Z%C3%BCrich/@47.2088177,8.1869486,7z/data=!4m2!3m1!1s0x47900b9749bea219:0xe66e8df1e71fdc03 || fas fa-location-arrow
  GitHub: https://github.com/Adamink || fab fa-github
  E-Mail: mailto:wuxiao_1997@outlook.com || fa fa-envelope
  Resume: https://drive.google.com/file/d/1SPAb0IV08PyrDARwEW2kmDtMD4VnQIXG/view?usp=sharing || fas fa-file

Also, the default page width of Pisces is too wide for me, so I edited themes/next/source/css/variables/Pisces.styl:

1
2
3
4
5
$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');
// $content-desktop-large        = 1160px;
// $content-desktop-largest      = 73%;
$content-desktop-large   = 800px;
$content-desktop-largest = 50%;

Link a custom domain name to Github Pages

The default domain name of github pages will be [***].github.io. We can replace it with custom domain name.

  1. Change records at DNS server.
  2. Add CNAME to source folder, so that it will be deployed every time we call hexo deploy. The contents of CNAME file is simply the domain name. 
    1
    wuxiao.site

Useful links: