最近用 Hexo 重新搭建了个人博客，虽然我以前用网页拼凑我的老网站花了很多时间，但写作和发布体验的巨大差别让我还是进入Hexo阵营了。
我的理解是，这是一个自动生成静态（html+css+js）网站的工具，主题里是很多模块化的网页，可以通过.yml配置文件运用这些模块，把MarkDown(.md)博客批量转化为网页并且跟主页形成总分结构。
下面是我用Hexo搭建个人网站的过程和网站配置：
首先，一切以Hexo官网为准。
Hexo官网
准备工作
- 正常使用Github的电脑。
- 开了Github Pages的Repository。
如果不了解Github可以看Github Pages(一)：一个最基础的个人网站。
配置Hexo文件夹
在Mac上安装 Node/Npm
brew update
brew install node
（windows/linux用户参见此官方教程）
安装 Hexo
npm install hexo -g
hexo init blog
cd blog
npm install
hexo s
这时博客就在本地生成了。访问http://localhost:4000 可以看效果。
可以说Hexo是很强大的，默认主题网站结构合理，适配手机，搜索栏（google）也有了。只需要优化（改一下失效的链接，添加评论，RSS等模块）就行了。
基本操作
-
hexo g生成/public 文件夹，里面是网站 -
hexo d把这个网站文件夹推送到服务器 -
hexo clean删除网站文件夹 -
hexo s本地查看效果
配置文件
配置文件是两个，第一个是根目录的 _config.yml。重要配置有
- language: zh-CN 是中文，不写是英文
- url: https://hans2936.github.io （网站地址）
- root: / (根目录在哪里，github就写斜杠，有些服务器会多一层路径)
- skip_render: README.md 这样可以在 /source 里面放一个 README.md，推送的时候自动传到 Github 上面
- theme: landscape 这里可以换主题
推送设置 (GitHub)
deploy:
type: git
repository: https://github.com/hans2936/hans2936.github.io.git
branch: master
如果网站在服务器上，则可以用 rsync
deploy:
type: rsync
host: 服务器名
user: 用户名
root: 放网站的文件夹
port: 22
第二个配置文件，是主题的配置文件 themes/landscape/_config.yml，主要有导航栏(menu)，侧边栏(widgets)，网站图标(favicon)等。
写新文章
hexo new "article name"
这条命令会在source/_posts产生新文件，然后改改文件名，在进入编辑MarkDown就行了。
每篇文章最上面是配置区，能用到的主要是
- title: 题目
- date: 日期 （会影响在主页的顺序）
- tags: 标签
- categories: 分类
- updated: 修改日期
配置区下面就随便写了。值得一提的是，文章正文是支持html语言的，这样特殊字体和元素就可以直接加进去。
创建页面
hexo new page about
会在 source/about 里面产生新文件，跟文章是一样编辑的。
然后再从主题配置的导航栏里面加上这一页。
menu:
...
关于: /about
引用图片
执行 npm install hexo-asset-image --save
然后，主配置文件 _config.yml 设置为
post_asset_folder: true
这个时候创建新文章就会产生一个同名文件夹，把图片放入即可。
然后在文章正文这样引用放进去的图片。
引用视频文件
对某个链接中的视频文件，可以执行 npm install hexo-tag-dplayer
这是一个播放器插件，使用时在文章中加入：
{% dplayer "url=" "pic=" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
其中 url 是视频地址，pic 是缩略图地址。
这个方法是引入视频的最佳方法，但是需要一个地方来存放这些文件（url）。
Github只有1G太少了，可以考虑使用阿里云oss存储，淘宝账户就能开，还很便宜。
引入第三方视频
对视频网站上的视频，可在Markdown文件中明码使用html语言 iframe，比如
<div class="selfadapting-video">
<iframe src="" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
其中class="selfadapting-video" 是一个自适应长宽比例的容器，具体看这篇博客。
创建侧边栏
比如在 themes/landscape/layout/_widget/ 创建一个 about.ejs
<% if (site.tags.length){ %>
<div class="widget-wrap">
<h3 class="widget-title">About</h3>
<div class="widget">
E-mail: xyz@123.com
</div>
</div>
<% } %>
然后在主题配置的侧边栏中加上：
widgets:
- ...
- about
RSS 订阅
执行 npm install hexo-generator-feed
然后在主配置文件 _config.yml 里面加上
plugin:
- hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
然后在主题配置文件里加上 rss: /atom.xml。
站点地图
类似上一条，执行 npm install hexo-generator-sitemap --save
主配置文件添加：
# Sitemap
sitemap:
path: sitemap.xml
然后提交给 Google Search Console 就行了。
高级修改 (评论，分享)
Hexo的网页其实是被拆开成很多零件的，主要在themes/landscape/layout/_partial/，
当在网页中加入一个新的模块时，比如对评论系统Gitment来说（关于Gitment见此教程），首先要打开 head.ejs 引用js, css文件（需放入themes/landscape/source）
<link rel="stylesheet" href="/css/gitment.css">
<script src="/js/gitment.browser.js"></script>
然后在 article.ejs 里面加上 Gitment 的code
<% if (!index && post.comments){ %>
<section id="comments">
<div id="gitment"></div>
<script>
const gitment = new Gitment({
id: '<%= post.date %>',
owner: 'username',
repo: 'username.github.io',
oauth: {
client_id: '---yourID---',
client_secret: '---yourKey---',
},
})
gitment.render('gitment')
</script>
</section>
<% } %>
就实现这个第三方功能了。注意 id: '<%= post.date %>' 这句话是为了修复网页路径过长不能显示评论的bug (在手机app内分享网页很容易出现长后缀)。
主题自带的功能也可以改，比如说分享功能可以在themes/landscape/source/js/script.js加一句，
'<a href="http://service.weibo.com/share/share.php?&title=' + encodedUrl + '" class="article-share-sina" target="_blank" title="微博"></a>'
然后找到themes/landscape/source/css/_partial/article.styl 比照着定义一个 .article-share-sina 就可以了。
像这种高级修改，对有一定网页知识的人来说有无限可能，自己做一个主题都是可以的。
尽管有了Hexo，对html/css/JavaScript的基本了解还是有必要的。
网友评论