how to create github io blog by using hexo

xxx

创建站点

假设你的Mac环境已经安装了git、atom、node、npm软件。首先,在git账号下创建一个firekyrin.github.io的Repo,然后在本地clone该仓库,并使用hexo初始化:

1
2
3
4
5
6
7
8
9
10
11
mkdir mygit
cd mygit/
git clone https://github.com/firekyrin/firekyrin.github.io.git
npm i -g hexo
npm i -g hexo-cli
cd firekyrin.github.io/
hexo init firekyrin.github.io
cd firekyrin.github.io/
npm i hexo-deployer-git --save
hexo generate #生成静态html
hexo server #启动本地服务

完成以后,在浏览器中打开http://localhost:4000 ,就可以在本地看到blog的效果了。

在terminal中输入命令,打开firekyrin.github.io文件夹:

1
atom .

在Atom左侧面板中编辑_config.yml文件,修改deploy部分:

1
2
3
deploy:
type: git
repo: https://github.com/firekyrin/firekyrin.github.io.git

最后,部署网站:

1
2
hexo deploy #将本地修改部署上去
firefox firekyrin.github.io #在firefox浏览器查看网站

atom编辑环境配置

Atom是facebook开发的一套代码编辑软件,我们可以用Atom来写markdown标记的内容。在写markdown文章前,先对编辑软件做一些环境配置:
在Atom->Preferences->+install中,搜索并安装以下软件包:

1
2
3
4
5
6
7
platformio-ide-terminal
markdown-scroll-sync
linter-markdown
markdown-writer
markdown-toc
markdown-pdf
markdown-preview

设置一下markdown-writer:
Atom->Preferences->Packages->markdown-writer->Settings,在Site Engine中,选择Hexo选项。其他安装包的设置方式类似,如果你要设置的话。

用atom写markdown文章

在firekyrin.github.io目录中,执行命令:

1
atom .

打开firekyrin.github.io目录,在右侧面板的source/_posts目录,编辑hello-world.md文件就行了,如果要看编辑效果,打开Atom->Packages->Markdown Preview。
修改完成后执行命令完成发布:

1
2
3
hexo generate #生成静态html文件
hexo server #本地打开localhost:4000查看
hexo deploy #部署

给Nexo换一个主题

以next主题(http://theme-next.iissnan.com/getting-started.html )为例,执行命令:

1
2
3
cd firekyrin.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next
rm -rf themes/next/.git*

下载完成后,在firekyrin.github.io/_config.xml中找到theme字段,将字段内容改为next。