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

最新推荐文章于 2024-06-15 17:25:52 发布

t822876884

最新推荐文章于 2024-06-15 17:25:52 发布

阅读量2.4k

点赞数

分类专栏：免费搭建博客

免费搭建博客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

喜欢写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搭建个人独立博客