使用HEXO构建个人博客

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown (或其他渲染引擎)解析文章,利用靓丽的主题快速帮您生成静态网页,并可将网页按需求进行推送。文章记录笔者安装及使用过程中的一些问题及经验。参考网站:https://hexo.io/zh-cn/docs/

准备

  • node.js
  • git

hexo基于node开发,下载地址 https://nodejs.org/en/,选择LTS版本即可
git大家都比较熟悉,不多介绍。

安装hexo

使用node command prompt 或gitbash

使用npm安装软件包可能下载速度很慢,可以根据需要安装淘宝的cnpm,使用淘宝镜像库,减少安装时间。

npm install -g cnpm --registry=https://registry.npm.taobao.org

后面的过程以cnpm为例,没有安装的直接以npm代替ncpm即可

安装hexo,查看hexo版本:

cnpm install -g hexo-cli

hexo -v

这一步成功说明hexo已成功安装,接下来就是制作自己的博客

制作博客

构建博客框架

在合适的路径下生成博客文件夹

mdr blogname

在blog路径下初始化hexo,这里不同的环境稍有差异

  • Windows环境下:

    cd blog  
    hexo  init
    
  • macOS环境下:

    cd blog
    sudo hexo init
    

初始化后先将博客网页发布在本地:hexo s ,通过本地浏览器localhost:4000预览

此时是hexo的初始页面

chushi

制作自己的博客内容

hexo new "我的第一篇博客文章"

我的第一篇博客文章

新的文章存储在source/_post 路径下, 使用文本或typora对文章进行编辑,再发布:

hexo clean && g && s

重新发布前一定要先把原来的数据清除,否则可能会出现更新不及时或内容无法上传等情况

远程部署

hexo生成的博客网页可以直接发布到网站,也可以部署到自己github,推荐使用github

建立github仓库,把文章部署到自己的仓库
在新建仓库时需注意仓库的第一字段必须与owner相同。博客建成后,仓库链接就可以用作分享链接。
新建仓库

hexo框架的博客有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

修改站点配置文件 Deployment 部分,填写 deploy :

deploy:
type: git

repo: https://github.com/Wenxc/Wenxc.github.io

branch: master

安装部署插件:

cnpm install --save hexo-deployer-git

把博客部署到仓库:

hexo d

Windows环境直接推送可能会报错,这是因为没有指定邮箱和用户名,部署前先配置GitHub帐户
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

然后再重新执行部署,成功后新建的仓库内就能看到博客
部署成功

这时就可以通过分享github pages 让别人快速访问你的博客了。


主题美化

前面步骤只是搭建出了个人博客,对个人博客的美化和内容填充是一个日积月累的过程,慢慢来。
这里推荐4款github上分享的主题

https://github.com/litten/hexo-theme-yilia

https://github.com/litten/hexo-theme-mellow

https://github.com/litten/hexo-theme-next

https://github.com/litten/hexo-theme-concise

以yilia为例,克隆到本地或直接下载后解压到themse文件夹内

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

配置参数文件

在站点配置文件Extensions部分,将theme的landscape改为yilia

Plugins: https://hexo.io/plugins/
Themes: https://hexo.io/themes/
theme: landscape

然后清除缓存,更新数据库发布,部署到仓库。(每次更新数据前必须清理缓存)

hexo clean && g && s hexo d