Hexo入门
安装Node.js和npm
前往Node.js官网下载并安装Node.js
。新版的Node.js
已经集成了npm
。在命令行中检测安装:
1 | > node -v |
安装Hexo
使用npm
安装Hexo
:
1 | > npm install -g hexo-cli |
初始化博客
在你准备存放博客本地文件的目录下,输入:
1 | > hexo init blog |
在当前目录下,会新建一个blog
文件夹,即你的博客在本地所有资源的根目录。
之后,进入到根目录下,创建你的第一篇博客:
1 | > cd blog |
利用Hexo
生成静态文件:
1 | > hexo g |
启动本地服务器查看博客:
1 | > hexo s |
默认下访问网址为http://localhost:4000/
。在浏览器输入后就可以看到整个博客的雏形了。
更多关于Hexo
的命令可以查看Hexo官方文档。
Hexo工作原理
new
命令默认格式为:
1 | > hexo new [layout] <title> |
默认情况下layout
为post
,会在/blog/source/_posts/
下生成Markdown文件title.md
,通过编辑这个文件来编辑自己的博客文章内容。
编辑完成后,使用命令generate
(即hexo g
),Hexo
会根据配置文件,生成博客网址中的所有静态内容(.html
文件等),生成的所有静态文件存放在/blog/public/
中。可以使用
1 | > hexo clean |
来清除缓存文件和已经生成的静态文件。
部署博客
假设你已经完成了博客上的所有内容,想要将它部署到web服务器上。下面以github.io
为例。
你需要:
- GitHub账户
- 创建
USERNAME.github.io
仓库,USERNAME为你的Github用户名。 - 本地安装
Git
并关联账户。
以上步骤不做描述,可以参考github入门到上传本地项目。
下面开始将博客部署到Github服务器上。
修改/blog/_config.yml
文件,即站点配置文件,将最后的Deployment部分修改为:
1 | deploy: |
repo
即之前创建的仓库,branch
可以修改为别的分支。以上修改内容会影响hexo d
命令(即部署命令)的行为。
安装Git部署插件:
1 | > npm install hexo-deployer-git --save |
之后输入命令部署博客:
1 | > hexo clean |
此时,你的博客已经完成自动部署,浏览器输入USERNAME.github.io
就可以真正在网络上访问你的博客了。
域名绑定
想要使用自己的个性化域名来代替USERNAME.github.io
,需要完成域名绑定。国内主流的代理厂商有阿里云和腾讯云等,具体操作官网文档有详细说明。
Hexo进阶
一个简易的博客已经搭建好了,以下说明如何添加更多个性化的设置以及丰富自己的博客。
设置主题
网上有大量开源的Hexo主题,直接在Github搜索”hexo-theme”就能找到很多不错的主题。下面以NexT为例,更换主题。
安装NexT,在/blog/
目录下输入:
1 | > git clone https://github.com/iissnan/hexo-theme-next themes/next |
主题的所有资源文件保存在/blog/themes
中,例如上面的命令就会得到/next/
目录。
打开站点配置文件/blog/_config.yml
,将theme:
内容修改为next
。
打开主题配置文件/blog/themes/next/_config.yml
,可修改scheme:
内容
,NexT
默认提供了四种scheme。
修改完成后,重新执行:
1 | > hexo clean |
完成修改,之后可以选择运行本地服务器(hexo s
)或者直接部署(hexo d
)来查看效果。
个人信息与社交链接
主页上的个人信息在站点配置文件中修改。即Site
部分。
社交链接在主题配置文件中修改。在/blog/themes/next/_config.yml
中找到”Social Links”,在下方设置,文件注释中就有详细的说明。
添加评论系统
NexT
主题提供多种评论系统的支持,例如Disqus
,Hypercomments
等,此处以Gitment
为例,为博客文章增加评论系统。
Gitment是作者实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入,不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作,同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。只能使用GitHub账号进行评论。详细配置过程可以参考hexo 博客next主题集成gitment或者gitalk评论系统。
同时,如果想要使用其它评论系统,在主题配置文件中,每一个支持的评论系统上方的注释,都会包含该系统的主页,进入主页即可了解每个系统的配置方式。
添加打分系统
使用widgetpack
,登录官网widgetpack.com注册并获取ID,之后填写在主题配置文件的以下部分:
1 | rating: |
注意,ID部分只包含数字。
添加转发功能
使用needmoreshare2
,NexT
直接提供插件支持,并提供官方使用说明。
首先,在themes/next
中安装依赖:
1 | > git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton |
之后修改主题配置文件:
1 | ... |
更多自定义选项可以参考主题配置文件中的相关注释。postbottom
部分为每篇文章的转发选项,而float
部分为博客主页的转发浮动图标。可以修改的选项包括按钮风格,位置,以及社交图标。
更多自定义风格
主题配置文件中还有大量可以修改的选项,详细配置方法和所需插件等均在注释中有说明。通过阅读和修改配置文件,就可以完全自定义自己的博客主页了。
以修改背景图片为例:
找到\blog\themes\next\source\css\_custom\custom.styl
,添加以下代码:
1 | body { |
并将对应的图片放入\blog\themes\next\source\images\
目录下即可。
本文为博主原创文章,转载请注明出处。