Skip to content

使用GitHub Pages来Hexo一个独立博客

Mr.wu edited this page Oct 28, 2017 · 1 revision

安装Hexo

安装Node.js

安装Hexo

$ npm install -g hexo

初始化Hexo

在本地新建一个文件夹,名称自拟,在这里先把文件夹取名为hexo,进入该文件夹,执行Hexo的init命令来初始化:

$ hexo init

稍等片刻,便会自动在hexo文件夹生成网站所需要的文件。

下载模块

在hexo/目录下,执行如下命令,下载生成网站所需要的插件模块。

$ npm install

生成静态页面

在hexo/目录下,执行如下命令,生成静态页面至hexo/public/目录。

$ hexo generate

本地调试

在hexo/目录下,执行如下命令,启动本地服务,进行博客预览调试: 打开浏览器,输入http://localhost:4000就可以看到网站的效果。

$ hexo server

生成文章

在hexo/目录下,执行如下命令,生成文章。

$ hexo new [layout] "名称" 

其中layout是可选参数,默认值为post。Hexo默认提供三种layout选择,具体可到hexo/scaffolds目录下查看文件,分别是draft、page与post。可以自定义其内容或者新建一种layout。

  • 参数post的作用为新建一篇文章。指定名称的md文件存在于hexo/source/_post目录下,当我们使用命令hexo generate来生成静态页面的时候,该目录下的文章会生成到public文件夹里面,当我们更新数据到网站上时,该文章就会显示在网页上。

  • 参数draft的作用为新建一篇文章草稿。指定名称的md文件存在于hexo/source/_drafts目录里面,当我们生成静态页面的时候,该目录下的文章不会生成到public文件夹里面,即不会同步到我们网站上。当你认为可以发布该文章的时候,应把该文章的md文件移到hexo/source/_post目录下。

  • 参数page的作用为新建一个网站页面。该命令会在hexo/source目录下新建一个指定名称的文件夹,该文件夹下有一个index.md文件。

编辑文章

生成文章后,打开相应的md文件,就可以开始编辑了。

文章开头格式如下:

title: postName #文章的名称,可以任意修改,不会出现在URL中
date: 2017-04-25 15:30:16 #文章的时间,一般不改,当然也可以任意修改
categories: #文章的分类目录,可以为空
tags: #文章的标签,多标签请用格式[tag1,tag2,tag3],可以为空
description: #本页的描述,可以为空

---
<!--这里开始使用markdown格式输入你的正文。-->
......

需要注意的是,上面所有:后面必须要有一个空格,不然会报错的。

如果需要文章摘要功能,只需在正文中添加如下代码:

以上是摘要
<!--more-->
以下是余下全文
以上的正文内容即是文章摘要,在网站首页显示。以下内容需要点击Read More链接打开全文才能显示

安装主题

我觉得,自己搭建博客最大的乐趣就在于自己能随意地更换网页样式布局,而Hexo提供了不少主题供我们选择,每一种主题都有它的特色,我想大家一定能从中找到自己所钟意的。

从Hexo的主题列表https://github.com/hexojs/hexo/wiki/Themes中找到自己喜欢的主题。我选择了其中的Jacman,小清新的色调加上新颖的响应式布局,对我十分有吸引力。安装主题的方法就是一条简单的git命令,如下:

git clone https://github.com/wuchong/jacman

打开hexo/目录下的_config.yml文件,修改主题为Jacman

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: Jacman

(进阶)自定义主题。Jacman提供丰富的配置属性,配置文件为hexo/themes/jacman目录下的_config.yml文件,大部分配置代码都有注释,按照注释填写或修改即可。若遇到不清楚的地方,建议去作者所写的配置指南查看,链接为:如何使用Jacman主题

部署到Github

首先,需要配置hexo/目录下的_config.yml文件:

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: git@github.com:username/username.github.io.git
    branch: master

记得把其中的username替换成你Github的账号名。

接着,执行如下指令,即可完成部署。

$ hexo clean
$ hexo generate
$ hexo deploy

需要注意的是每一次部署都会覆盖掉之前在Github版本库中存放的文件,如果想提交一些额外的文件保存在仓库里,譬如说404页面,可以把它直接放在source目录下,那每一次生成页面时也会自动把你想要额外提交的文件生成到public目录下。

如果出现如下问题:

ERROR Deployer not found: git

不要紧张,原因是没有hexo-deployer-git这个插件模块,我们只需要输入如下命令:

npm install hexo-deployer-git --save

稍等片刻,安装完重新执行上面第二步,如无意外,便能部署成功。

打开浏览器,输入username.github.io就可以看到自己网站的效果。

Hexo命令

常用的命令:

$ hexo init #初始化
$ hexo new "name" #新建文章
$ hexo clean 清楚数据
$ hexo generate #生成静态页面至public目录
$ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
$ hexo deploy #将.deploy_git目录部署到GitHub

参考:http://eleveneat.com/2015/04/24/Hexo-a-blog/

Home

Android 开发录

-深入理解LayoutInflater.inflate()的参数

计算机网络原理

数据库

Java 垃圾回收机制

Java 开发录

面试

搭建翻墙shadowsocks 教程

其他

Clone this wiki locally