使用hexo搭建github博客过程记录

2016-08-29 1355点热度 0人点赞 0条评论

基础安装

nodejs,git的安装是必备的,就不多说了

hexo安装

按照官方的文档进行操作

npm install -g hexo-cli
hexo init auvyo
cd auvyo
npm install

修改配置文件_config.yml

先修改一些基本的内容

# Site
title: 王显锋个人博客网站
subtitle: 王显锋个人博客网站--记录生活所得
description: 记录生活中的点点滴滴 王显锋 生活记录
author: 王显锋
language: zh-CN
timezone: Asia/Shanghai

本地运行查看效果

使用如下命令生成文件

hexo generate
或者简写为
hexo g

使用如下命令启动服务

hexo server
或者简写为
hexo s

或者直接使用如下命令生成文件并启动服务

hexo s g

后台提示如下

然后在浏览器当中输入 http://localhost:4000 即可查看效果。

修改主题

首先到hexo thems网站找到自己心仪的主题,然后点击下方的问题,找到对应的github地址,然后到github上找到安装方法,这里我选择个人比较喜欢的raytaylorism,安装方法如下:

cd auvyo
git clone https://github.com/raytaylorlin/hexo-theme-raytaylorism.git themes/raytaylorism

下载完成之后修改配置文件_config.yml中的theme的配置为如下配置:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: raytaylorism

修改github配置

type为git
然后到github上创建一个仓库,仓库的名称为“github用户名.github.io",如我的github用户名为wangxianfeng,则创建的github仓库名为:wangxianfeng.github.io,如下图所示:
github仓库
然后点击“clone or download”按钮,可以显示git地址,复制即可,填入到repo项当中。

注意
type和repo后面的冒号和值之间需要有空格,没有空格会有问题,我也不知道为什么,这是我踩过的坑
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/wangxianfeng/wangxianfeng.github.io.git
  branch: master

发布到github上

按照如下步骤进行

npm install hexo-deployer-git --save
hexo deploy
或者简写为
hexo d

如果顺利的话,这时候应该可以发布到github上去了,如果有错误,自行百度,Google吧,不过以下方法可以试一下:
运行命令hexo clean清除一下,然后多试着发布几次,祝好运。

如何在文章中插入本地图片

在写本文的过程中插入了2张图片,在网上找到了一个比较好的插入本地图片的方法,感谢原作者,原文链接在 hexo 中优雅的使用本地图片

首先修改_config.yml配置文件中的如下内容,如果是false的话改成true

post_asset_folder:true

然后在博客根目录安装一个插件:CodeFalling/hexo-asset-image

npm install hexo-asset-image --save

然后在文章同目录创建一个同名的目录用于保存图片,目录结构如下:

source\_posts\使用hexo搭建github博客
├── hexosg.png
└── githubrepo.png
使用hexo搭建github博客.md

然后按照如下方式插入图片就行了

![github仓库](使用hexo搭建github博客/githubrepo.png)

使用hexo g生成静态文件的时候,会把图片也会复制过去,运行hexo depoy名利的时候也可以把图片一同发布,一起看起来都那么美好,哈哈。

配置主题

配置多说

修改themes\raytaylorism_config.yml中的多说配置,配置为多说分配的二级域名前面的部分,如我的多说域名为:auvyo.duoshuo.com,则多说配置为:

# 多说shortname,若为空则不启用
duoshuo_shortname: auvyo

配置值和配置项之间记得要有空格。

配置搜索

首先在博客根目录安装搜索插件hexo-generator-search

npm install hexo-generator-search --save

然后在博客的配置文件_config.yml中添加如下配置:

search:
  path: search.xml
  field: all

field可选项有post,page和all,我这里配置为all。
重新clean,generate,deploy即可。

把源代码也提交到github上

为了能够在多台电脑上同步源代码,在其他电脑上也能够同步书写博客,所以也需要把源代码提交到github管理。

在其他电脑上安装完git,nodejs,github for windows之后只需要clone源代码到本地,然后运行以下命令就可以安装hexo完成了:

npm install -g hexo-cli
npm install hexo --save
npm install

王显锋

激情工作,快乐生活!

文章评论