记录:这个blog搭建过程

发表于 更新于

这是一篇文章，用来记录我搭建这个博客的过程。

开始

安装Hexo

1
$ npm install -g hexo-cli

初始化博客文件夹

1
2
$ hexo init blog
$ cd blog

选一款喜爱的主题

我选用的主题是Cactus:
https://github.com/probberechts/hexo-theme-cactus

1
$ git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

修改_config.yml文件，将主题从landscape调整为cactus

_config.yml
1
2
# theme: landscape
theme: cactus

添加about页面

1
$ hexo new page about

自定义一些细节

修改themes/cactus/_config.yml，进行一些自定义。例如主题风格、联系方式

themes/cactus/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

projects_url: /

nav:
  home: /
  articles: /archives/
  about: /about/
#  projects: http://github.com/probberechts

social_links:
  -
    icon: mail
    link: mailto:[email protected]

colorscheme: light

修改themes/cactus/layout/_partial/footer.ejs，将Hexo和主题作者信息添加到footer

themes/cactus/layout/_partial/footer.ejs
1
2
3
4
5
6
7
8
<div class="footer-left">
    <%= __('footer.copyright') %> &copy;
    <% var endYear = (theme.copyright && theme.copyright.end_year) ? theme.copyright.end_year : new Date().getFullYear() %>
    <% var startYear = (theme.copyright && theme.copyright.start_year) ? theme.copyright.start_year : new Date().getFullYear() %>
    <%= startYear >= endYear ? endYear : startYear + "-" + endYear %>
    <%= config.author || config.title %>    
+   <font>, powerd by <a href="https://github.com/hexojs/hexo">Hexo</a> and <a href="https://github.com/probberechts/hexo-theme-cactus">Cactus</a></font>
</div>

运行并查看效果

1
$ hexo server -p 5000

改用Next主题

感觉Cactus主题还是不够精简，每次打开页面都要加载10多MB的文件。于是乎找到了这个主题

1.下载next主题

1
2
cd hexo-site
git clone https://github.com/next-theme/hexo-theme-next themes/next

2.删除themes文件夹下原来的Cactus主题相关文件

3.修改_config.yml，启用next主题

_config.yml
1
2
- theme: cactus
+ theme: next

4.修改next主题的_config.yml

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- scheme: Muse 
+ scheme: Pisces
...
sidebar: true
post: true
...
menu:
 home: / || fa fa-home
 archives: /archives/ || fa fa-archive
...
social:
- #E-Mail: mailto:[email protected] || fa fa-envelope
+ E-Mail: mailto:[email protected] || fa fa-envelope
...

5.为了让首页文章显示’阅读全文’，需要为每一篇文章添加 <!–more–> 标签。还好写的文章并不多，这个工作量并不是很大。