本文将利用Hexo和GitHub搭建个人博客,预览效果可以查看我的个人博客Jarvis’s Blog
前往Node.js官网下载并安装Node.js
。新版的Node.js
已经集成了npm
。在命令行中检测安装:
> node -v
v6.10.1
> npm -v
3.10.10
使用npm
安装Hexo
:
> npm install -g hexo-cli
在你准备存放博客本地文件的目录下,输入:
> hexo init blog
在当前目录下,会新建一个blog
文件夹,即你的博客在本地所有资源的根目录。
之后,进入到根目录下,创建你的第一篇博客:
> cd blog
> hexo new my-firts-post
利用Hexo
生成静态文件:
> hexo g
启动本地服务器查看博客:
> hexo s
默认下访问网址为http://localhost:4000/
。在浏览器输入后就可以看到整个博客的雏形了。
更多关于Hexo
的命令可以查看Hexo官方文档。
new
命令默认格式为:
> hexo new [layout]
默认情况下layout
为post
,会在/blog/source/_posts/
下生成Markdown文件title.md
,通过编辑这个文件来编辑自己的博客文章内容。
编辑完成后,使用命令generate
(即hexo g
),Hexo
会根据配置文件,生成博客网址中的所有静态内容(.html
文件等),生成的所有静态文件存放在/blog/public/
中。可以使用
> hexo clean
来清除缓存文件和已经生成的静态文件。
假设你已经完成了博客上的所有内容,想要将它部署到web服务器上。下面以github.io
为例。
你需要:
USERNAME.github.io
仓库,USERNAME为你的Github用户名。Git
并关联账户。以上步骤不做描述,可以参考github入门到上传本地项目。
下面开始将博客部署到Github服务器上。
修改/blog/_config.yml
文件,即站点配置文件,将最后的Deployment部分修改为:
deploy:
type: git
repo: https://github.com/USERNAME/USERNAME.github.io.git
branch: master
repo
即之前创建的仓库,branch
可以修改为别的分支。以上修改内容会影响hexo d
命令(即部署命令)的行为。
安装Git部署插件:
> npm install hexo-deployer-git --save
之后输入命令部署博客:
> hexo clean
> hexo g
> hexo d
此时,你的博客已经完成自动部署,浏览器输入USERNAME.github.io
就可以真正在网络上访问你的博客了。
想要使用自己的个性化域名来代替USERNAME.github.io
,需要完成域名绑定。国内主流的代理厂商有阿里云和腾讯云等,具体操作官网文档有详细说明。
一个简易的博客已经搭建好了,以下说明如何添加更多个性化的设置以及丰富自己的博客。
网上有大量开源的Hexo主题,直接在Github搜索”hexo-theme”就能找到很多不错的主题。下面以NexT为例,更换主题。
安装NexT,在/blog/
目录下输入:
> 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。
修改完成后,重新执行:
> hexo clean
> hexo g
完成修改,之后可以选择运行本地服务器(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,之后填写在主题配置文件的以下部分:
rating:
enable: true
id: YOURID
color: fc6423
注意,ID部分只包含数字。
使用needmoreshare2
,NexT
直接提供插件支持,并提供官方使用说明。
首先,在themes/next
中安装依赖:
> git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
之后修改主题配置文件:
...
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
更多自定义选项可以参考主题配置文件中的相关注释。postbottom
部分为每篇文章的转发选项,而float
部分为博客主页的转发浮动图标。可以修改的选项包括按钮风格,位置,以及社交图标。
主题配置文件中还有大量可以修改的选项,详细配置方法和所需插件等均在注释中有说明。通过阅读和修改配置文件,就可以完全自定义自己的博客主页了。