Install npm and hexo
1 | $ sudo apt update |
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 | # Update |
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
25scheme: 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.
- Change records at DNS server.
- 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: