hexo + github page 搭建博客
作为一个有梦想的程序员,如果不能有个一个属于自己的博客,那这人生也就少了些许乐趣了.所以,这两天我基于hexo和github page 搭建了一个个人博客. 并且做了一下的总结,希望可以帮助他人搭建出属于自己的博客.
准备
- git 安装
- github账号申请 (官网)
- node.js 安装 (由于hexo是node.js平台下的,所以要先安装node.js)
- hexo 安装(一个很nice的静态博客框架)
这里我对于软件的安装就不过多介绍了,不是很懂的可以去看看一下文章:
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的项目，可以将你的静态网页部署到它的网站上. 不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。
- 创建一个仓库
要想是你的仓库具可以使用github page,那么你的仓库命名就要遵循它的规则,形如:<username>.github.io或者<orgname>.github.io这样.
Paste_Image.png
- 找到你仓库的地址
点击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/
