GuangchaoSun's Blog

利用Hexo和Github搭建博客

如何利用Github建立属于自己的博客?本文给出一种Github+Hexo的搭建方法。

毕业了,感觉自己啥也不会,方向是有,但还有很长的一段路要走,看到大神的博客都很不错,虽然自己只是个菜鸟,还是希望能把自己的成长经历记录下来,也是对自己有一个鞭策。所以一直想拥有自己的博客,以前用CSDN的博客,但感觉界面没有达到自己的预期,就想自己搭建一个,可以实现比较自由的定制。
今天终于把这个Blog给搞好了,就是目前所看到的这个样子,当然这只是初始阶段,没有用模板,也没有进行优化,这几步会在后面学习过前端的知识后来进行,最后可以购买个域名,就差不多了。前面一段时间一直纠结于Jelly+Github的模式,因为配置环境太过于繁琐而放下了一段时间,正好最近有空就看看,恰好就给弄好了。这里我要推荐的是Hexo+Github模式,简单很多,也比较好用。

名词解释

What is Hexo?
Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.
附上官方网址:Hexo
What is Github?
基本常识,不知道的请找google(自备梯子-Lantern)。

环境配置

环境配置总的来说要分为三步:
Git:
这里默认已经安装好git并且已有Github的账号,SSH也已经配置好。
Node.js
Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
附上地址:Node.js

下载好Node.js一路默认安装就好。最后可以通过下图的命令测试是否安装通过。

图片

安装Hexo

上面的步骤全部完成之后,下一步就是安装Hexo:

$ npm install -g hexo-cli

安装完成后,进行初始化。建立一个文件夹命名为Hexo
在那个文件夹中右键打开Git Bash,输入以下命令:

$ hexo init
$ npm install

初始化完成之后,可以看到目录结构:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

各个部分都有其作用(挖个坑),比较重要的是_config.yml这个文件,是关于博客的一些配置。

配置更改

_config.yml这个文件中,需要将deploy下面改成这个形式:

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

我的是这个样子:
deploy
特别注意的是”:”之后必须有一个空格,不然肯定是错的。改好之后就为后面发布自己的Blog做好了准备。

新建一篇文章

$ hexo new [layout] <title>

使用这个命令可以新建一个markdown文件,在Hexo\source\_posts根目录下
直接进行编辑,就是一篇文章。

本地测试

在Hexo3中server和主体结构动画是分开的,所以需要安装server。

$ npm install hexo-server --save

安装之后用以下命令可以运行server:

$ hexo server

一般来说在浏览器中输入http://localhost:4000就可以看到Blog的页面。
我这里的4000端口被占用了,可以用以下命令来改变端口:

$ hexo server -p 5000

发布博客

先安装hexo-deployer-git

$ npm install hexo-deployer-git --save

三步走:

$ hexo clean
$ hexo generate
$ hexo deploy

最后,登陆博客的地址就可以看到界面了。图床的话,我用的是七牛云,比较推荐。

参考: