在Github上搭建个人博客

发表于   |   分类于   |  

摘要

本文档记录在Github上搭建个人博客的学习笔记，涉及git,github,Hexo的内容。

Updaterecordes

  • 2016-08-17\
    添加“其他页面配置”；“图片显示资源引用问题”；”写文章“；”代码高亮“

  • 2016-08-18\
    添加“本地测试”；“评论”

Hexo笔记

Hexo官方文档：https://hexo.io/zh-cn/docs/。

简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用
Markdown来解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

安装前请确认电脑中已经安装Node.js和Git(本文安装Github)并配置好环境变量。

npm install -g hexo-cli

安装插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
npm install hexo-generator-cname --save

如果我们直接创建一个新文件CNAME，填好域名。但会发现在下一次部署后这个文件就消失了。不用惊讶，因为hexo并不会自动生成CNAME文件，所以在部署时被覆盖删除了。这个插件自动在public里生成一个CNAME文件，把你的域名加进去再部署一下,

常用操作

写文章

https://hexo.io/zh-cn/docs/writing.html\
当然也可以直接在source目录下新建一个.md文件

hexo new [layout] <title>
# or
hexo n <title>
#`将草稿转为post`
hexo publish [layout] <title>

#Scaffold`（模板）`
hexo new photo "My Gallery"

Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章。

Layout

默认为post。Hexo
有三种默认布局：post（存储在source/_posts下）、page（存储在source下）
和 draft（草稿，存储在source/_drafts）.

生成文件及部署

hexo generate
# or
hexo g


hexo generate --watch
# or
hexo g -w

Hexo 能够监视文件变动并立即重新生成静态文件，在生成时会比对文件的 SHA1
checksum，只有变动的文件才会写入。

执行下列的其中一个命令，让 Hexo
在生成完毕后自动部署网站，这些命令的作用是相同的。

hexo generate --deply
hexo deploy --generate
hexo d -g
hexo g -d

本地测试

默认地址：127.0.0.1:4000

hexo server
# or
hexo s

hexo s -p PORT

# `自定义IP`
hexo server -i 192.168.1.1

# `静态模式`
hexo server -s

在静态模式下，服务器只处理 public
文件夹内的文件，而不会处理文件变动，在执行时，您应该先自行执行 hexo
generate。

主题相关

这里使用NexT主题。http://theme-next.iissnan.com/

代码高亮

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。
默认使用的是白色的 normal。

language
1
highlit_theme:  night

个性化配置

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。
其中，一份位于站点根目录下，主要包含 Hexo
站点本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。配置文件使用的是Yml语言。

图片显示及资源引用问题

Problem：

主页无法显示图片，文章具体页面可以显示

Try：

修改站点配置文件

1
post_asset_folder: true

#开启文章资源文件夹，为每篇文章创建一个目录。这个目录包含所有的资源，这样可以通过相对路径引用。

Hexo生成文章目录

hexo-toc插件，此插件可以生成文章目录。

npm install hexo-toc --save

在站点配置文件（_config.yml）中配置如下

#toc configuration
toc:
   maxDepth: 3 #`最多可生成三级目录`

重新生成即可。

其他页面生成

这里以分类页面为例

1
2
3
hexo new page categories #`新建一个页面`

type: "categories"

编辑刚新建的页面，将页面的类型设置为 categories
，主题将自动为这个页面显示所有分类。

评论系统

这里采用DISQUS：https://disqus.com/。

具体步骤：

  1. 首先在官网上注册一个号

  2. 依据步骤填写shortname等信息，\
    在Choose your platform 页面，这里依据实际情况选择Universal Code

  3. 复制第一个代码块中的代码，然后打开
    comment.ejs，删除所有代码并粘贴刚才复制的代码，保存即可。

  4. 在站点配置文件添加“disqus_shortname: YourShortName”