http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/
摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册、DNS设置、github和Hexo设置等过程,这是我写得最长的一篇教程。我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后来者一个明确的指引,同时用这篇教程开篇,正式开始我的第八大洲之旅。
前言
作为一个技术小白,没有技术基础,看网上的教程也云里雾里,看程序员的教程相当不容易,稍微有些细节描述得不清楚自己就要绕弯路去找答案(善用搜索引擎),所以,在自己的博客搭建完成之后,我决定要将我搭建博客的过程全记录下来,以供后期和我一样的小白参考(是的,我坚信还有很多一样和我一样的人),我会尽可能详细的整理这个教程,其中的资料可能会摘录到其他人的教程,我会在后面列出了参考资料,感谢这些作者们。
为什么要开博客?可以看看我的这篇《为什么你要写博客?》
也可以看看这篇《我的博客时代》
以下以我的博客:www.cnfeat.com为例,教大家如何搭建一个独立博客。
为什么要搭建一个独立博客?
独立的才是自己的。
小白进入门槛
- 1、非常折腾,需要耐心;
- 2、也需要一定的学习能力和钻研精神;
- 3、懂一些网页基础知识,不懂也重要,参看第二和第三条;
小白白请看
2014年5月15日更新:发现一个更简单的方法:用静态页面生成静态博客 byisnowfy
按此教程操作即可。
为什么选择GitHub Pages?
很多人用wordpress,你为什么要用github pages来搭建?
- 1、github pages有300M免费空间,资料自己管理,保存可靠;
- 2、学着用github,享受github的便利,上面有很多大牛,眼界会开阔很多;
- 3、顺便看看github工作原理,最好的团队协作流程;
- 4、github是趋势;
- 5、你不觉得一个文科生用github很geek吗?瞬间跻身技术界;
- 6、就算github被墙了,我可以搬到国内的gitcafe中去。
GitHub Pages是什么?
GitHub Pages本用于介绍托管在GitHub的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。
github Pages可以被认为是用户编写的、托管在github上的静态网页。
购买域名
只推荐上godaddy购买,安全,而且可以使用支付宝。
教程(截止至2014年5月10日)如下
1、查你想要的域名;
2、查到适合的域名之后选择「continue to Cart」;
3、godaddy附加收费服务,不要管,继续「continue to Cart」;
4、确认购买。修改购买年限,默认是两年,可以修改成1/2/3/5/10年,随自己喜欢。现在godaddy上com每年的默认费用是12.99美元,附加上ICANN的管理费用就是13.17美元。
如果你不是土豪,可以上网搜godaddy的优惠码,一大堆,找一个填进这里,填完之后,一年的费用会变成8.99美元。
说明一下:一般来讲,使用网上的优惠码第一年收费8.99美元,以后每年的收费是10.99美元,不过在网上可以搜到合适的优惠码,可以每年的收费都是8.99美元,记得多测试自行鉴别。
如图,我买了五年的费用就是45.85美元,随后点击「Proceed to Checkout」
5、结算。登录或注册界面,填完必要的信息之后,选择用支付宝结算。
如果以上的教程如果不够清晰,可以参照这一份《2013年10月新版godaddy域名注册图文教程》。
6、检查。结算后,重新登录,去「My Account」,域名已经显示在你的账户了。
7、补充一些注意事项:
- 输入优惠码没有优惠或者优惠幅度较低,请清除浏览器cookies再尝试;
- 如果没有支付宝支付选项,有可能是使用的优惠码不支持支付宝,请重新清除浏览器cookies再尝试;
- 注册时用户填写信息时一定要输入正确的邮箱名字,否则修改十分麻烦。
- 买完域名之后一定要记得去自己的邮箱查看激活邮件,否则域名激活不了。
安装准备软件
依次下载安装。
怎么打开Git?
注册GitHub
注册你的username和邮箱,邮箱十分重要,GitHub上很多通知都是通过邮箱的。
注册过程比较简单,详细也可以看:
一步步在GitHub上创建博客主页 全系列 by pchou(推荐)
配置和使用Github
以下教程主要参考beiyuu的《使用Github Pages建独立博客》写成。
配置SSH keys
我们如何让本地git项目与远程的github建立联系呢?用SSH keys。
检查SSH keys的设置
首先我们需要检查你电脑上现有的ssh key:
<code style="">$ <span class="built_in eye-protector-processed" style="">cd</span> ~/. ssh 检查本机的ssh密钥 </code>
如果提示:No such file or directory 说明你是第一次使用git。
生成新的SSH Key:
<code style="">$ ssh<span class="attribute eye-protector-processed" style="">-keygen</span> <span class="attribute eye-protector-processed" style="">-t</span> rsa <span class="attribute eye-protector-processed" style="">-C</span> <span class="string eye-protector-processed" style="">"邮件地址@youremail.com"</span> Generating <span class="keyword eye-protector-processed" style="">public</span>/<span class="keyword eye-protector-processed" style="">private</span> rsa key <span class="built_in eye-protector-processed" style="">pair</span><span class="built_in eye-protector-processed" style="">.</span> Enter file <span class="keyword eye-protector-processed" style="">in</span> which <span class="keyword eye-protector-processed" style="">to</span> save the key (/Users/your_user_directory<span class="subst" style="">/</span><span class="built_in eye-protector-processed" style="">.</span>ssh/id_rsa):<span class="subst" style=""><</span>回车就好<span class="subst" style="">></span> </code>
注意1: 此处的邮箱地址,你可以输入自己的邮箱地址;注意2: 此处的「-C」的是大写的「C」
然后系统会要你输入密码:
<code style=""><span class="constant eye-protector-processed" style="">Enter</span> passphrase (empty <span class="keyword eye-protector-processed" style="">for</span> no passphrase)<span class="symbol" style="">:<</span>输入加密串> <span class="constant eye-protector-processed" style="">Enter</span> same passphrase <span class="symbol" style="">again:</span><再次输入加密串> </code>
在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。
注意:输入密码的时候没有*字样的,你直接输入就可以了。
最后看到这样的界面,就成功设置ssh key了:
添加SSH Key到GitHub
在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。
-
1、打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。
-
2、登陆github系统。点击右上角的 Account Settings—->SSH Public keys —-> add another public keys
-
3、把你本地生成的密钥复制到里面(key文本框中), 点击 add key 就ok了
测试
可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:
<code style=""><span class="variable eye-protector-processed" style="">$ </span>ssh -<span class="constant eye-protector-processed" style="">T</span> git<span class="variable eye-protector-processed" style="">@github</span>.com </code>
如果是下面的反馈:
<code style="">The authenticity <span class="keyword eye-protector-processed" style="">of</span> host <span class="comment eye-protector-processed" style="">'github.com (207.97.227.239)' can't be established.</span> RSA <span class="keyword eye-protector-processed" style="">key</span> fingerprint <span class="keyword eye-protector-processed" style="">is</span> <span class="number eye-protector-processed" style="">16</span>:<span class="number eye-protector-processed" style="">27</span>:ac:a5:<span class="number eye-protector-processed" style="">76</span>:<span class="number eye-protector-processed" style="">28</span>:<span class="number eye-protector-processed" style="">2</span>d:<span class="number eye-protector-processed" style="">36</span>:<span class="number eye-protector-processed" style="">63</span>:<span class="number eye-protector-processed" style="">1</span>b:<span class="number eye-protector-processed" style="">56</span>:<span class="number eye-protector-processed" style="">4</span>d:eb:df:a6:<span class="number eye-protector-processed" style="">48.</span> Are you sure you want <span class="keyword eye-protector-processed" style="">to</span> <span class="keyword eye-protector-processed" style="">continue</span> connecting (yes/no)? </code>
不要紧张,输入yes就好,然后会看到:
<code style="">Hi cnfeat! You<span class="attribute eye-protector-processed" style="">'ve</span> successfully authenticated, but GitHub does <span class="keyword eye-protector-processed" style="">not</span> provide shell <span class="keyword eye-protector-processed" style="">access</span>. </code>
设置用户信息
现在你已经可以通过SSH链接到GitHub了,还有一些个人信息需要完善的。
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。
<code style="">$ git config --<span class="keyword eye-protector-processed" style="">global</span> user.name <span class="string eye-protector-processed" style="">"cnfeat"</span><span class="comment eye-protector-processed" style="">//用户名</span> $ git config --<span class="keyword eye-protector-processed" style="">global</span> user.email <span class="string eye-protector-processed" style="">"cnfeat@gmail.com"</span><span class="comment eye-protector-processed" style="">//填写自己的邮箱</span> </code>
SSH Key配置成功
本机已成功连接到github。
若有问题,请重新设置。常见错误请参考:
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)
使用GitHub Pages建立博客
与GitHub建立好链接之后,就可以方便的使用它提供的Pages服务,GitHub Pages分两种,一种是你的GitHub用户名建立的username.github.io这样的用户&组织页(站),另一种是依附项目的pages。
想建立个人博客是用的第一种,形如cnfeat.github.io这样的可访问的站,每个用户名下面只能建立一个。
github上建立仓库
登录后系统,在github首页,点击页面右下角「New Repository」
填写项目信息:
project name:cnfeat.github.io
description: Writing 1000 Words a Day Changed My Life
注:Github Pages的Repository名字是特定的,比如我Github账号是cnfeat,那么我Github Pages Repository名字就是cnfeat.github.io。
点击「Create Repository」 完成创建。
详细可以看这里:一步步在GitHub上创建博客主页(2)
用Hexo克隆主题
Hexo介绍
Hexo的作者是tommy351,根据官方介绍,Hexo是一个简单、快速、强大的博客发布工具,支持Markdown格式。
安装Hexo
打开git。
<code style=""><span class="variable eye-protector-processed" style="">$ </span>npm install -g hexo </code>
部署Hexo
在我的电脑中建立一个名字叫「Hexo」的文件夹,然后在此文件夹中右键打开Git Bash。
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo init </code>
Hexo随后会自动在目标文件夹建立网站所需要的所有文件。
现在我们已经搭建起本地的hexo博客了,执行以下命令(在H:\hexo),然后到浏览器输入localhost:4000看看。
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo g <span class="variable eye-protector-processed" style="">$ </span>hexo s </code>
复制cnfeat的主题
以下进入复制主题环节,如果那一步出现问题,或者修改后没有显示修改的结果,建议来来一个,再看看,可以解决很多问题。
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo clean <span class="variable eye-protector-processed" style="">$ </span>hexo g <span class="variable eye-protector-processed" style="">$ </span>hexo s </code>
建立了Hexo文件之后就可以复制我的主题了
<code style=""><span class="variable eye-protector-processed" style="">$ </span>git clone <span class="symbol" style="">https:</span>/<span class="regexp eye-protector-processed" style="">/github.com/cnfeat</span><span class="regexp eye-protector-processed" style="">/cnfeat.git themes/jacman</span> </code>
如果不行,可以复制wuchong的修改的主题,我的就是复制他的修改的。
<code style=""><span class="variable eye-protector-processed" style="">$ </span>git clone <span class="symbol" style="">https:</span>/<span class="regexp eye-protector-processed" style="">/github.com/wuchong</span><span class="regexp eye-protector-processed" style="">/jacman.git themes/jacman</span> </code>
或者复制yangjian的
<code style=""><span class="variable eye-protector-processed" style="">$ </span>git clone <span class="symbol" style="">https:</span>/<span class="regexp eye-protector-processed" style="">/github.com/</span><span class="constant eye-protector-processed" style="">A</span>-limon/pacman.git themes/pacman </code>
启用cnfeat的主题
修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为jacman。同时请设置stylus属性中的compress值为true。
<code style=""><span class="attribute eye-protector-processed" style="">theme</span>: <span class="string eye-protector-processed" style="">jacman</span> </code>
注意:Hexo有两个config.yml文件,一个在根目录,一个在theme下,此时修改的是在根目录下的。
更新主题
<code style=""><span class="variable eye-protector-processed" style="">$ </span>cd themes/jacman <span class="variable eye-protector-processed" style="">$ </span>git pull </code>
注意:为避免出错,请先备份你的_config.yml 文件后再升级
本地查看调试
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo g <span class="comment eye-protector-processed" style="">#生成</span> <span class="variable eye-protector-processed" style="">$ </span>hexo s <span class="comment eye-protector-processed" style="">#启动本地服务,进行文章预览调试</span> </code>
或者直接作用组合命令
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo d -g </code>
浏览器输入http://localhost:4000,查看搭建效果。此后的每次变更_config.yml 文件或者上传文件都可以先用此命令调试,非常好用,尤其是当你想调试出自己想要的主题时。
将独立域名与GitHub Pages的空间绑定
GitHub Pages的设置
方法一:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如cnfeat.com。
方法二:到我的github仓库,点击右下角的「Download ZIP」,下载源文件,解压,找到CNAME文件,用记事本打开,将cnfeat.com修改成你的域名,放进Hexo\source目录下,用hexo命令提交上去。
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo d -g </code>
DNS设置
用DNSpod,快,免费,稳定。
注册DNSpod,添加域名,如下图设置。
其中A的两条记录指向的ip地址是github Pages的提供的ip
- 192.30.252.153
- 192.30.252.154
如博客不能登录,有可能是github更改了空间服务的ip地址,记得及时到在GitHub Pages查看最新的ip即可
www指定的记录是你在github注册的仓库。
去Godaddy修改DNS地址
更改godaddy的Nameservers为DNSpod的NameServers。
3、将godaddy的Nameservers更改成f1g1ns1.dnspod.net和f1g1ns2.dnspod.net
如有不详看可以看DNSpod提供的官方帮助
详细也可以看这里:一步步在GitHub上创建博客主页(3)
搭建完成
至此,独立博客就算搭建完成,如需进步一完善请在参看以下文章或博客下留言。
Pacman主题介绍 by yangjian
使用hexo搭建博客 by yangjian
hexo系列教程:(二)搭建hexo博客 by zippera(推荐)
hexo系列教程:(三)hexo博客的配置、使用by zippera(推荐)
进阶篇:Hexo设置
网站搭建完成后,就可以根据自己爱好来对Hexo生成的网站进行设置了,对整站的设置,只要修改项目目录的_config.yml就可以了,这是我的设置,可供参考。
<code style=""><span class="preprocessor eye-protector-processed" style=""># Hexo Configuration</span> <span class="preprocessor eye-protector-processed" style="">## Docs: http://hexo.io/docs/configuration.html</span> <span class="preprocessor eye-protector-processed" style="">## Source: https://github.com/tommy351/hexo/</span> <span class="preprocessor eye-protector-processed" style=""># Site #整站的基本信息</span> <span class="label" style="">title:</span> <span class="number eye-protector-processed" style="">1000</span> words a Day <span class="preprocessor eye-protector-processed" style="">#网站标题</span> <span class="label" style="">subtitle:</span> Writing <span class="number eye-protector-processed" style="">1000</span> Words a Day Changes My Life <span class="preprocessor eye-protector-processed" style="">#网站副标题</span> <span class="label" style="">description:</span> 学习总结 思考感悟 知识管理 <span class="preprocessor eye-protector-processed" style="">#网站描述</span> <span class="label" style="">author:</span> cnFeat <span class="preprocessor eye-protector-processed" style="">#网站作者,在下方显示</span> <span class="label" style="">email:</span> cnFeat@gmail<span class="preprocessor eye-protector-processed" style="">.com</span> <span class="preprocessor eye-protector-processed" style="">#联系邮箱</span> <span class="label" style="">language:</span> <span class="built_in eye-protector-processed" style="">zh</span>-CN <span class="preprocessor eye-protector-processed" style=""># URL</span> <span class="preprocessor eye-protector-processed" style="">## If your site is put in a subdirectory</span> <span class="label" style="">url:</span> http://www<span class="preprocessor eye-protector-processed" style="">.cnfeat</span><span class="preprocessor eye-protector-processed" style="">.com</span> <span class="preprocessor eye-protector-processed" style="">#你的域名</span> <span class="label" style="">root:</span> / <span class="label" style="">permalink:</span> :year/:month/:day/:title/ <span class="label" style="">tag_dir:</span> tags <span class="label" style="">archive_dir:</span> archives <span class="label" style="">category_dir:</span> categories <span class="label" style="">code_dir:</span> downloads/code <span class="preprocessor eye-protector-processed" style=""># Directory</span> <span class="label" style="">source_dir:</span> source <span class="label" style="">public_dir:</span> public <span class="preprocessor eye-protector-processed" style=""># Writing</span> <span class="label" style="">new_post_name:</span> :title<span class="preprocessor eye-protector-processed" style="">.md</span> <span class="preprocessor eye-protector-processed" style=""># File name of new posts</span> <span class="label" style="">default_layout:</span> post <span class="label" style="">auto_spacing:</span> false <span class="preprocessor eye-protector-processed" style=""># Add spaces between asian characters and western characters</span> <span class="label" style="">titlecase:</span> false <span class="preprocessor eye-protector-processed" style=""># Transform title into titlecase</span> <span class="label" style="">external_link:</span> true <span class="preprocessor eye-protector-processed" style=""># Open external links in new tab</span> <span class="label" style="">max_open_file:</span> <span class="number eye-protector-processed" style="">100</span> <span class="label" style="">multi_thread:</span> true <span class="label" style="">filename_case:</span> <span class="number eye-protector-processed" style="">0</span> <span class="label" style="">render_drafts:</span> false <span class="label" style="">post_asset_folder:</span> false <span class="label" style="">highlight:</span> enable: true line_number: true tab_replace: <span class="preprocessor eye-protector-processed" style=""># Category & Tag</span> <span class="label" style="">default_category:</span> uncategorized <span class="label" style="">category_map:</span> <span class="label" style="">tag_map:</span> <span class="preprocessor eye-protector-processed" style=""># Archives</span> <span class="preprocessor eye-protector-processed" style="">## 2: Enable pagination</span> <span class="preprocessor eye-protector-processed" style="">## 1: Disable pagination</span> <span class="preprocessor eye-protector-processed" style="">## 0: Fully Disable</span> <span class="label" style="">archive:</span> <span class="number eye-protector-processed" style="">2</span> <span class="label" style="">category:</span> <span class="number eye-protector-processed" style="">2</span> <span class="label" style="">tag:</span> <span class="number eye-protector-processed" style="">2</span> <span class="preprocessor eye-protector-processed" style=""># Server</span> <span class="preprocessor eye-protector-processed" style="">## Hexo uses Connect as a server</span> <span class="preprocessor eye-protector-processed" style="">## You can customize the logger format as defined in</span> <span class="preprocessor eye-protector-processed" style="">## http://www.senchalabs.org/connect/logger.html</span> <span class="label" style="">port:</span> <span class="number eye-protector-processed" style="">4000</span> <span class="label" style="">server_ip:</span> <span class="number eye-protector-processed" style="">0.0</span><span class="number eye-protector-processed" style="">.0</span><span class="number eye-protector-processed" style="">.0</span> <span class="label" style="">logger:</span> false <span class="label" style="">logger_format:</span> <span class="preprocessor eye-protector-processed" style=""># Date / Time format</span> <span class="preprocessor eye-protector-processed" style="">## Hexo uses Moment.js to parse and display date</span> <span class="preprocessor eye-protector-processed" style="">## You can customize the date format as defined in</span> <span class="preprocessor eye-protector-processed" style="">## http://momentjs.com/docs/#/displaying/format/</span> <span class="label" style="">date_format:</span> YYYY-MM-DD <span class="label" style="">time_format:</span> H:mm:ss <span class="preprocessor eye-protector-processed" style=""># Pagination</span> <span class="preprocessor eye-protector-processed" style="">## Set per_page to 0 to disable pagination</span> <span class="label" style="">per_page:</span> <span class="number eye-protector-processed" style="">15</span> <span class="preprocessor eye-protector-processed" style="">#每页15篇文章</span> <span class="label" style="">pagination_dir:</span> page <span class="preprocessor eye-protector-processed" style=""># Disqus #社会化评论disqus,我使用多说,在主题中配置</span> <span class="label" style="">disqus_shortname:</span> <span class="preprocessor eye-protector-processed" style=""># Extensions</span> <span class="preprocessor eye-protector-processed" style="">## Plugins: https://github.com/tommy351/hexo/wiki/Plugins</span> <span class="preprocessor eye-protector-processed" style="">## Themes: https://github.com/tommy351/hexo/wiki/Themes</span> <span class="label" style="">theme:</span> jacman <span class="label" style="">exclude_generator:</span> <span class="label" style="">Plugins:</span> - hexo-generator-feed - hexo-generator-sitemap <span class="preprocessor eye-protector-processed" style="">#sitemap</span> <span class="label" style="">sitemap:</span> path: sitemap<span class="preprocessor eye-protector-processed" style="">.xml</span> <span class="preprocessor eye-protector-processed" style="">#Feed Atom</span> <span class="label" style="">feed:</span> type: atom path: atom<span class="preprocessor eye-protector-processed" style="">.xml</span> limit: <span class="number eye-protector-processed" style="">20</span> <span class="preprocessor eye-protector-processed" style=""># Markdown</span> <span class="preprocessor eye-protector-processed" style="">## https://github.com/chjj/marked</span> <span class="label" style="">markdown:</span> gfm: true pedantic: false sanitize: false tables: true breaks: true smartLists: true smartypants: true <span class="preprocessor eye-protector-processed" style=""># Stylus</span> <span class="label" style="">stylus:</span> compress: false <span class="preprocessor eye-protector-processed" style=""># Deployment</span> <span class="preprocessor eye-protector-processed" style="">## Docs: http://hexo.io/docs/deployment.html</span> <span class="label" style="">deploy:</span> type: github repository: https://github<span class="preprocessor eye-protector-processed" style="">.com</span>/cnfeat/cnfeat<span class="preprocessor eye-protector-processed" style="">.github</span><span class="preprocessor eye-protector-processed" style="">.io</span><span class="preprocessor eye-protector-processed" style="">.git</span> branch: master </code>
修改局部页面
页面展现的全部逻辑都在每个主题中控制,源代码在hexo\themes\jacman\中:
<code style="">. ├── languages <span class="preprocessor eye-protector-processed" style="">#多语言</span> | ├── default<span class="preprocessor eye-protector-processed" style="">.yml</span><span class="preprocessor eye-protector-processed" style="">#默认语言</span> | └── <span class="built_in eye-protector-processed" style="">zh</span>-CN<span class="preprocessor eye-protector-processed" style="">.yml</span> <span class="preprocessor eye-protector-processed" style="">#中文语言</span> ├── layout <span class="preprocessor eye-protector-processed" style="">#布局,根目录下的*.ejs文件是对主页,分页,存档等的控制</span> | ├── _partial <span class="preprocessor eye-protector-processed" style="">#局部的布局,此目录下的*.ejs是对头尾等局部的控制</span> | └── _widget<span class="preprocessor eye-protector-processed" style="">#小挂件的布局,页面下方小挂件的控制</span> ├── source <span class="preprocessor eye-protector-processed" style="">#源码</span> | ├── css<span class="preprocessor eye-protector-processed" style="">#css源码 </span> | | ├── _base <span class="preprocessor eye-protector-processed" style="">#*.styl基础css</span> | | ├── _partial <span class="preprocessor eye-protector-processed" style="">#*.styl局部css</span> | | ├── fonts <span class="preprocessor eye-protector-processed" style="">#字体</span> | | ├── images <span class="preprocessor eye-protector-processed" style="">#图片</span> | | └── style<span class="preprocessor eye-protector-processed" style="">.styl</span> <span class="preprocessor eye-protector-processed" style="">#*.styl引入需要的css源码</span> | ├── fancybox <span class="preprocessor eye-protector-processed" style="">#fancybox效果源码</span> | └── js <span class="preprocessor eye-protector-processed" style="">#javascript源代码</span> ├── _config<span class="preprocessor eye-protector-processed" style="">.yml</span><span class="preprocessor eye-protector-processed" style="">#主题配置文件</span> └── README<span class="preprocessor eye-protector-processed" style="">.md</span> <span class="preprocessor eye-protector-processed" style="">#用GitHub的都知道</span> </code>
发表新文章
用hexo发表新文章
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo n <span class="comment eye-protector-processed" style="">#写文章 </span> </code>
其中my new post为文章标题,执行命令后,会在项目\source_posts中生成my new post.md文件,用编辑器打开编写即可。
当然,也可以直接在\source_posts中新建一个md文件,我就是这么做的。
写完后,推送到服务器上,执行
<code style=""><span class="variable eye-protector-processed" style="">$ </span>hexo g <span class="comment eye-protector-processed" style="">#生成</span> <span class="variable eye-protector-processed" style="">$ </span>hexo d <span class="comment eye-protector-processed" style="">#部署 # 可与hexo g合并为 hexo d -g</span> </code>
用Hexo发表文章的Markdown语法
使用jacman或pacman主题,建议按此标准语法写:
<code style="">title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中 date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改 categories: example #分类 tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格 <span class="header eye-protector-processed" style="">description: 附加一段文章摘要,字数最好在140字以内。 ---</span> 以下正文 </code>
为什么我的博客有目录?
我用的是Markdown语法,Markdown语法怎么用?
请看这里:献给写作者的 Markdown 新手指南
或者看这里:Markdown
Hexo命令
常用命令:
<code style="">hexo <span class="keyword eye-protector-processed" style="">new</span> <span class="string eye-protector-processed" style="">"postName"</span> <span class="preprocessor eye-protector-processed" style="">#新建文章</span> hexo <span class="keyword eye-protector-processed" style="">new</span> page <span class="string eye-protector-processed" style="">"pageName"</span> <span class="preprocessor eye-protector-processed" style="">#新建页面</span> hexo generate <span class="preprocessor eye-protector-processed" style="">#生成静态页面至public目录</span> hexo <span class="keyword eye-protector-processed" style="">server</span> <span class="preprocessor eye-protector-processed" style="">#开启预览访问端口(默认端口4000,'ctrl + c'关闭server)</span> hexo deploy <span class="preprocessor eye-protector-processed" style="">#将.deploy目录部署到GitHub</span> </code>
常用复合命令:
<code style="">hexo d -g <span class="comment eye-protector-processed" style="">#生成加部署</span> hexo s -g <span class="comment eye-protector-processed" style="">#预览加部署</span> </code>
简写:
<code style="">hexo n == hexo <span class="keyword eye-protector-processed" style="">new</span> hexo g == hexo generate hexo s == hexo <span class="keyword eye-protector-processed" style="">server</span> hexo d == hexo deploy </code>
安装插件
添加sitemap和feed插件
<code style="">$ npm install hexo<span class="attribute eye-protector-processed" style="">-generator</span><span class="attribute eye-protector-processed" style="">-sitemap</span> $ npm install hexo<span class="attribute eye-protector-processed" style="">-generator</span><span class="attribute eye-protector-processed" style="">-feed</span> </code>
修改_config.yml,增加以下内容
<code style=""><span class="preprocessor eye-protector-processed" style=""># Extensions</span> <span class="label" style="">Plugins:</span> - hexo-generator-feed - hexo-generator-sitemap <span class="preprocessor eye-protector-processed" style="">#Feed Atom</span> <span class="label" style="">feed:</span> type: atom path: atom<span class="preprocessor eye-protector-processed" style="">.xml</span> limit: <span class="number eye-protector-processed" style="">20</span> <span class="preprocessor eye-protector-processed" style="">#sitemap</span> <span class="label" style="">sitemap:</span> path: sitemap<span class="preprocessor eye-protector-processed" style="">.xml</span> </code>
Hexo上传README文件
Github的版本库通常建议同时附上README.md说明文件,但是hexo默认情况下会把所有md文件解析成html文件,所以即使你在线生成了README.md,它也会在你下一次部署时被删去。怎么解决呢?
在执行hexo deploy前把在本地写好的README.md文件复制到.deploy文件夹中,再去执行hexo deploy。
404页面
GitHub Pages有提供制作404页面的指引:Custom 404 Pages。
直接在根目录下创建自己的404.html或者404.md就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。
推荐使用腾讯公益404。
图床
推荐使用七牛(10G空间,免费),还可以使用Yupoo(100m免费空间)
参考资料:
[1]一步步在GitHub上创建博客主页 全系列 by pchou(推荐)
[2]网站优化:一步步在GitHub上创建博客主页(6) by pchou (推荐)
[3]搭建一个免费的,无限流量的Blog——github Pages和Jekyll入门 by 阮一峰(推荐)
[4]hexo系列教程:(二)搭建hexo博客 by zippera(推荐)
[5]hexo系列教程:(三)hexo博客的配置、使用by zippera(推荐)
[6]hexo系列教程:(四)hexo博客的优化技巧 by zippera(推荐)
[7]hexo你的博客 by ibruce(推荐)
[8]Pacman主题介绍 by yangjian(推荐)
[9]使用hexo搭建博客 by yangjian(推荐)
[10]折腾了个Pacman主题 by wuchong(推荐)
[11]hexo官方写作教程「Writing」
[12]知乎上的教程:如何搭建个人独立博客?
[13]在GitHub Pages设置独立域名的官方教程:[Setting up a custom domain with GitHub Pages]
[14]使用Github Pages建独立博客 by beiyuu
[15]git/github初级运用自如 by 虫师
[16]hexo搭建静态博客以及优化 by Joanna Wu
[17]使用Hexo搭建个人博客 by c4fun
[18]Github Pages与Hexo建个人博客流程 by Kesco
[19]Git push时重复输入用户名密码的问题 by zippera
[20]hexo文件结构及网站优化 by kevin chen
相关链接
[2]godaddy域名商
[3]DNSPOD
[4]Hexo官方主页
[5]GotGitHub:GitHub介绍(推荐)
[6]本地测试页localhost:4000
鸣谢
Van Cheng