最近正好在学习前端开发,想着搭建一个属于自己的个人博客,把自己的技能树整理整理,温故而知新。
如果你有前端开发经验,那么搭建这样的博客就很简单了。
一 什么是Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
就是说,你不需要自己从头到尾写一个个人博客的网站出来,该框架已经帮你写好了,你只需要配置一下风格,填充内容,再部署到服务器让别人能访问就行了。
二 为什么部署到github
GIthub Pages则是github上的一项功能,可以放置网页文件到指定文件夹,然后给你一个专属域名用于展示一些项目,但现在大多用来开发制作个人博客网站。
环境配置
Hexo官网上本就有对Hexo安装及使用的详细介绍,墙裂推荐。这里来讲述自己安装的亲身步骤,或有区别。
1.Node.js
用来生成静态页面。移步Node.js官网,下载v5.5.0 Stable 一路安装即可。
2.Git
用来将本地Hexo内容提交到Github上。Xcode自带Git,这里不再赘述。如果没有Xcode可以参考Hexo官网上的安装方法。
安装Hexo
当Node.js和Git都安装好后就可以正式安装Hexo了,终端执行如下命令:
代码语言:javascript复制sudo npm install -g hexo
输入管理员密码(Mac登录密码)即开始安装(sudo
:linux系统管理指令 -g
:全局安装)
注意坑一:Hexo官网上的安装命令是$ npm install -g hexo-cli
,安装时不要忘记前面加上sudo
,否则会因为权限问题报错。
初始化
终端cd到一个你选定的目录,执行hexo init
命令:
hexo init blog
blog
是你建立的文件夹名称。cd到blog
文件夹下,执行如下命令,安装npm:
npm install
执行如下命令,开启hexo服务器:
代码语言:javascript复制hexo s
此时,浏览器中打开网址http://localhost:4000,能看到效果。
本地设置好后,接下来开始关联Github。
关联Github:
创建仓库
登录你的Github帐号,新建仓库,名为用户名.github.io
固定写法,如wangdachui.github.io
即下图中1
所示:
本地的blog
文件夹下内容为:
_config.yml
db.json
node_modules
package.json
scaffolds
source
themes
打开_config.yml,
打开后往下滑到最后,修改成下边的样子:
deploy:
type: git
repository: https://github.com/gonghonglou/wangdachui.github.io.git
branch: master
你需要将repository
后wangdachui换成你自己的用户名。hexo 3.1.1版本后type:
值为git
。
注意坑二:在配置所有的_config.yml
文件时(包括theme中的),在所有的冒号:
后边都要加一个空格,否则执行hexo命令会报错,切记 切记
在blog
文件夹目录下执行生成静态页面命令:
hexo generate 或者:hexo g
代码语言:javascript复制此时若出现如下报错:
代码语言:javascript复制ERROR Local hexo not found in ~/blog
代码语言:javascript复制ERROR Try runing: 'npm install hexo --save'
代码语言:javascript复制则执行命令:
代码语言:javascript复制npm install hexo --save
代码语言:javascript复制若无报错,自行忽略此步骤。
再执行配置命令:
代码语言:javascript复制 hexo deploy 或者:hexo d
注意坑三:若执行命令hexo deploy
仍然报错:无法连接git或找不到git,则执行如下命令来安装hexo-deployer-git:
$ npm install hexo-deployer-git --save
再次执行hexo generate
和hexo deploy
命令。
若你未关联Github,则执行hexo deploy
命令时终端会提示你输入Github的用户名和密码,即
Username for 'https://github.com':
Password for 'https://github.com':
hexo deploy
命令执行成功后,浏览器中打开网址http://wangdachui.github.io(将wangdachui
换成你的用户名)能看到和打开http://localhost:4000
时一样的页面。
为避免每次输入Github用户名和密码的麻烦,可添加SSH Key到Github
发布文章
终端cd到blog
文件夹下,执行如下命令新建文章:
$ hexo new "postName"
名为postName.md
的文件会建在目录/blog/source/_posts
下,postName
是文件名,为方便链接不建议掺杂汉字。你当然可以用vim来编辑文章。我在用Mou编辑器,支持预览,虽然其预览主题并非我喜欢,如果你有好用的markdown编辑器请推荐给我,感激不尽!
文章编辑完成后,终端cd到blog
文件夹下,执行如下命令来发布:
hexo generate //生成静态页面
hexo deploy //将文章部署到Github
安装theme
你可以到Hexo官网主题页去搜寻自己喜欢的theme。这里以hexo-theme-next为例
终端cd到 blog
目录下执行如下命令:
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
将blog
目录下_config.yml
里theme
的名称landscape
修改为next
终端cd到blog
目录下执行如下命令(每次部署文章的步骤):
$ hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo g //生成缓存和静态文件
至于更改theme内容比如名称、描述、头像等去修改blog/_config.yml
文件和blog/themes/next/_config.yml
文件中对应的属性名称即可, 不要忘记冒号:
后加空格。 NexT 使用文档里有极详细的介绍。
主题下会有更详细的自定义教程,这里就不展开了。欢迎关注我的技术博客:https://wangdachui.github.io