博客搭建教程(持续更新)

喜欢写Blog的人,都会经历三个阶段:     
第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。


摘自:阮一峰–搭建一个免费的,无限流量的Blog—-github Pages和Jekyll入门

准备工作

安装Node.js

下载地址:http://nodejs.cn/

安装Git

下载地址:http://git-scm.com/download/

安装Hexo

 mkdir hexo 建立hexo文件夹
 cd d:/hexo 进入hexo文件夹
 npm install hexo-cli -g 安装hexo
 hexo init Hexo 初始化
 cd Hexo
 npm install
 hexo g # 或者hexo generate
 hexo s # 或者hexo server,可以在http://localhost:4000/ 查看

Hexo常用的几个命令:

 hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
 hexo server (hexo s) 启动本地web服务,用于博客的预览
 hexo deploy (hexo d) 部署播客到远端(比如github, heroku等平台)
 hexo new “postName” #新建文章
 hexo new page “pageName” #新建页面

简写

 hexo n == hexo new
 hexo g == hexo generate
 hexo s == hexo server
 hexo d == hexo deploy
 hexo d -g #生成部署
 hexo s -g #生成预览


现在我们打开http://localhost:4000/ 已经可以看到一篇内置的blog了。

部署Hexo到github

注册Github账户

首先,你得注册一个github账户。

github:https://github.com/

配置SSH keys

检查SSH keys的设置

从开始菜单中找到 Git Bash,键入

$ cd ~/. ssh  

检查本机的ssh密钥

生成新的SSH keys

$ ssh-keygen -t rsa -C "你的邮箱地址"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>

系统会在你本机创建一个文件夹,存放key的相关文件,并要求你输入github密码。

添加SSH Key到GitHub

  • 1、找到刚刚生成的文件

  • 2、打开github,找到setting下的SSH and GPG keys(图1)

  • 3、将id_rsa.pub用Notepad++打开,将里面的内容粘贴到(图2)中

测试是否添加成功

在Git Bash中键入$ ssh -T git@github.com

出现提示直接yes,然后键入密码

至此,我们已经成功连接到Github上。

设置用户信息

$ git config –global user.name “username”//用户名

$ git config –global user.email “username@gmail.com”//填写自己的邮箱

完成!

使用hexo deploy部署到GitHub

打开Hexo文件夹下的_config.yml文件,找到如下代码:(注意:冒号后面要加上一个空格,否则会报错。)

deploy:
  type: git
  repository: https://github.com/username/username.github.io.git
  branch: master

依次输入如下命令:

hexo clean
hexo g
hexo d

若出现以下提示则表明正确:

此时,打开https://t822876884.github.io/就能看到个人博客部署成功啦!

Hexo主题设置克隆

这里以主题yilia为例进行说明。

安装主题

  hexo clean
  git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

启用主题

修改Hexo根目录下的_config.yml配置文件中的theme属性,使用Notepad++打开,找到theme并将其设置为yilia。

更新主题

  cd themes/yilia
  git pull
  cd Hexo
  hexo g # 生成
  hexo s # 启动本地web服务器

现在打开http://localhost:4000/ ,会看到我们已经应用了一个新的主题。

Hexo 主题配置说明

 每个不同的主题会需要不同的配置,主题配置文件在主题目录下的_config.yml。
以我们使用的yilia主题为例,其提供如下的配置项(theme\yilia_config.yml):

#Header
menu:
主页: /
所有文章: /archives
# 随笔: /tags/随笔
# SubNav
subnav:
github: “#”
weibo: “#”
rss: “#”
zhihu: “#”
#douban: “#”
#mail: “#”
#facebook: “#”
#google: “#”
#twitter: “#”
#linkedin: “#”
rss: /atom.xml
# Content
excerpt_link: more
fancybox: true
mathjax: true
# Miscellaneous
google_analytics: ‘’
favicon: /favicon.png
#你的头像url
avatar: “”
#是否开启分享
share: true
#是否开启多说评论,填写你在多说申请的项目名称
duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: wtyx
#是否开启云标签
tagcloud: true
#是否开启友情链接
#不开启——
#friends: false
#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 我是谁,我从哪里来,我到哪里去?我就是我,是颜色不一样的吃货…

添加sitemap和feed插件

  • $ npm install hexo-generator-feed
  • $ npm install hexo-generator-sitemap

修改_config.yml

# Extensions
Plugins:
hexo-generator-feed
hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml

添加Fork me on Github

这里选择你喜欢的代码,添加到hexo/themes/yilia/layout/layout.ejs的div中即可,注意要将代码里的you改成你的Github账号名。

<a href="https://github.com/you">
<img style="position: absolute; top: 0; left: 0; border: 0;" 
src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" 
alt="Fork me on GitHub" 
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a>

再次运行

git pull(更新主题)

添加404公益页面

GitHub Pages有提供制作404页面的指引: Custom 404 Pages。

  直接在根目录下创建自己的404.html或者404.md就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。
推荐使用腾讯公益404。

添加about页面

hexo new page “about”

之后在\source\about\index.md目录下会生成一个index.md文件,打开输入个人信息即可。

使用不蒜子添加访客统计

详情参考http://ibruce.info/,具体做法很简单,就是在你的themes/your themes/layout/_partial/footer.ejs底部加入这段脚本

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后在<p class="copyright"></p>中间添加如下统计信息即可

本站总访问量 <span id="busuanzi_value_site_pv"></span> 次, 
访客数 <span id="busuanzi_value_site_uv"></span> 人次, 
本文总阅读量 <span id="busuanzi_value_page_pv"></span> 次

注:不蒜子官方网站http://service.ibruce.info/

部分参考博文:

如何搭建一个独立博客——简明Github Pages与Hexo教程

手把手教你使用Hexo + Github Pages搭建个人独立博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值