hexo + github page 搭建博客

作为一个有梦想的程序员,如果不能有个一个属于自己的博客,那这人生也就少了些许乐趣了.所以,这两天我基于hexo和github page 搭建了一个个人博客. 并且做了一下的总结,希望可以帮助他人搭建出属于自己的博客.

准备

• git 安装
• github账号申请 (官网)
• node.js 安装 (由于hexo是node.js平台下的,所以要先安装node.js)
• hexo 安装(一个很nice的静态博客框架)

这里我对于软件的安装就不过多介绍了,不是很懂的可以去看看一下文章:

• git安装教程
• node安装教程
• hexo安装教程

Hexo搭建本地博客服务

安装好hexo后,便可以利用hexo来搭建个人博客了.
新建一个文件夹:

folder.png

1.打开终端,执行命令:

$ cd  blog/

进入该文件夹.

2.初始化一个hexo项目:

$ hexo init

这样一个hexo项目就创建好了,我们可以看看它的目录结构:

目录.png

其中 ** theme** 是放置我们主题样式的文件 .
_config.yml是我们的配置文件
source文件夹,hexo会把该文件的内容解析成静态的博客网页.
3 . 创建一个新文章:

$ hexo new '新文章'

这样source目录下会有一个新的文件,如图所示:

source.png

其中** '新文章.md' **就是我们新建的文件.
我们可以在里面写一些内容:

Paste_Image.png

4 . 生成静态网页:

$ hexo generate   (或者其简写: $ hexo g )

然后我们会发现,在我们的目录下多出了一个public的文件夹.

Paste_Image.png

该文件夹中包含着所用我们用hexo生成的静态网页.

Paste_Image.png

其结构如上图所示.

5 . 发布到本地服务器

$ hexo server (简写:$ hexo s)

Paste_Image.png

出现以上信息时,就说明我们发布成功了.

6 . 访问本地hexo服务:

在浏览器上出入网址 :  http://localhost:4000/

我们可以看到以下界面:

Paste_Image.png

到此,一个hexo搭建的本地博客服务就成功了.

更换Hexo的主题样式

** landscape是hexo的themes目录下的默认主题.我们可以看看themes**目录

Paste_Image.png

1 . 下载一个主题

我们可以去官网主题库下载一个主题,这里我选择了Hacker这个主题.

Paste_Image.png

执行以下命令,把主题下载到本地:

$ git clone https://github.com/CodeDaraW/Hacker.git

2 . 更换主题
我们可以再去看看themes目录,会发现其多了一个文件夹,这便是我们刚下好的主题:

Paste_Image.png

让后我们可以去配置 ** _config.yml**文件,来更改我们的主题.

Paste_Image.png

找到该文件下的theme: landscape 字段,并将其修改成theme: Hacker

Paste_Image.png

这样,我们就更换好主题了,我们再次执行:

$ hexo g
$ hexo s

命令,来重新发布一下我们的博客.然后再来看看其变化.

Paste_Image.png

ok!主题更换完毕.

将我们的博客部署到github page上

GitHub Pages本用于介绍托管在GitHub的项目，可以将你的静态网页部署到它的网站上. 不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。

1. 创建一个仓库
   要想是你的仓库具可以使用github page,那么你的仓库命名就要遵循它的规则,形如:.github.io或者.github.io这样.

Paste_Image.png

2. 找到你仓库的地址
   点击clone or download按钮,你可以找到你的仓库地址

Paste_Image.png

3 . 将你的博客内容发布到你的github仓库中
首先安装hexo-deployer-git插件 ,该插件可以帮助你把public目录下的内容push到你的github仓库的master分支上.
执行:

$ npm  install  hexo-deployer-git -save

将该插件下载下来,让修改你的_config.yml配置文件.
(1)修改你的url

Paste_Image.png

(2)设置要push的仓库网址

Paste_Image.png

(3)执行

$ hexo d 

其中会让你输入你的账号和密码,正确输入便可. 这样你就把你的博客内容push到了你的仓库中.

4 .启动github page 功能
进入该仓库,点击 settings (设置),

Paste_Image.png

然后我们可看到如下页面,向下滑动,找到github page 选项

Paste_Image.png

点击none,选择master分支,点击save保存.然后会出现以下界面,代表你的github page功能开启.

Paste_Image.png

然后输入你的网址

Paste_Image.png

出现以下界面时,就代表你成功了.

Paste_Image.png

好了,于是一个属于你的个人博客就搭建好了.再此我要提醒你一下,当你访问你的的博客网址出现404错误时,可以试着耐心的等待15分钟左右,再次刷新一次看看.因为,github给你配置个人站点并不是实时的,所以需要等待一段时间. 当然,如果等了很久你访问你的博客网址还是404错误时,那只能说明你的操作出了问题,那只能你只能查阅资料自己解决了,少年.

最后给出我的博客的网址 https://pixiuyan.github.io/