github搭建一个免费的博客

IT`huhui 的前言录

• 我在GITHUB的个人站点：http://ithuhui.cn(教程是木有错的但是最近我把网站撤了。 所以看不到。)

正文

注意事项~!

• 站点的配置文件 _config.yml .主题里面也有个配置文件 _config.yml .

• 配置文件必须不能直接使用记事本来进行编辑,否则假如输入了中文会出现中文乱码,导致配置文件错误.在这里我使用了EditPlus进行编辑并转码为UTF-8来解决这个问题

• 该过程展示的是用git windows版本的,没有安装github windows版本.但是流程都是基本一样.

• 这里说到的一些注意事项是个人亲身经历,但不代表全部人都会遇到或者有用,请理性观看

• 转载请注明原地址，胡伟汇的个人博客主页:
  http://ithuhui.github.io

理清搭建所需的全部东西

基于github 我们需要：

git 或者 github (在这里我展示在windows平台)

基于hexo 我们需要：

(在这里介绍一下hexo博客搭建框架：Hexo 是高效的静态站点生成框架，她基于 Node.js。
通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，
还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。)

• hexo 的框架
  
• node.js
  
• next主题包或者在线安装
  

安装本地所需

安装node.js，提供官网下载

官网首页就提供稳定版本和最新版本，看大家喜好。

安装git或者github的windows版本

Git Windows版官方下载

GITHUB的配置

注册github的账号

建立repository(仓库)

这里十分注意的是github 提供的免费个人网站需要有规定的仓库命名,仓库命名为[xxx.github.io],为了避免大家疑惑,说明一下,以前是[xxx.github.com]
后来出现了漏洞现在都是必须改为[xxx.github.io],xxx为你的用户名,必须是你的用户名.

SSH密钥匹配

推荐大家看这个,写的简洁明了.我复制过来就没意思了.
Github简明教程
但是就搭建博客而言.大家配置好 SSH KEY就好了.
检出仓库往后的都可以后面再研究.

安装hexo博客框架

本地新建文件夹如:D:\GitSource\blog用于存储你的配置文件等

在本地文件夹路径下git bash here 或者可以自己cd进去。

安装hexo

npm install -g hexo
npm install hexo --save

初始化hexo

hexo init

安装Hexo 插件：自动生成sitemap,Rss，部署到git等

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install [email protected] --save
npm install [email protected] --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

生成静态页面的文件

hexo generate(或者hexo g)

启动hexo服务(一般用于测试效果)

hexo server

第一次验证

启动了hexo服务后，在浏览器地址栏输入http://127.0.0.1:4000/ 或者 http://localhost:4000/ 可以看到初始模板的页面

打开 站点的配置文件_config.yml 进行修改

(切记别直接用记事本打开来进行编辑修改.注意事项请看文章开头)
复制你仓库的地址然后编辑修改_config.yml文件.

假如你使用的是github windows版本,大概type要改成github.

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

然后分别执行命令,把文件上传到了Github

npm install hexo-deployer-git --save(如果前面插件都安装好这步可以免除)
hexo deployer(或者hexo d)

第二次验证

浏览器输入你的网址 https://ithuhui.github.io 查看初步成果
这里ithuhui改为你自己的用户名

NEXT主题下载并应用

方法一(推荐)：克隆最新版本
git bash 输入

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

方法二：下载稳定版本

解压所下载的压缩包至站点的 themes目录下,并将解压后的文件夹名称（hexo-theme-next-0.4.0）更改为 next。
然后修改 站点配置文件_config 的主题(theme)为next:

# Extensions
theme: next

下面提供：
NEXT主题官方发布页面https://github.com/iissnan/hexo-theme-next/releases，可以下载最新的next主题压缩包

部署全部完成后

日常使用命令

全部部署号以后,大家只需要记住这几个命令
新建博文,新建完之后再source/_posts/里面用markdown语法进行编辑你的博文

hexo new "博文的标题"

生成文件然后提交

hexo generate(或者hexo g)
hexo deployer(或者hexo d)

各个功能的添加

分类,标签页面的添加

• 修改站点配置文件(直接去掉注释就OK)

menu:
  tags: /tags

• 新增页面

hexo new page tags

• 修改新增的标签的index页面 路径在 /source/tags/index.md

---
title: tags
date: 2016-09-21 11:48:58
type: "tags"
comments: false
---

标签页面同理,大家修改把tags 换成categories就OK了.

增加第三方服务

百度统计

• 登录百度统计,打开代码获取,查看ID.打开主题配置文件_config.yml修改
  

# Baidu Analytics ID
baidu_analytics: 你的百度统计脚本ID

多说评论

• 打开主题配置文件_config.yml修改.
  
  新增或者直接把注释去掉duoshuo_shortname字段

# Duoshuo ShortName
duoshuo_shortname: 	你注册时候的值

访问量,访客量统计显示

• 修改主题配置文件. 把enable的值改为true; 然后根据需求把UV,PV打开.这里演示就是UV访客数统计

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 本站访客数
  site_uv_footer: 人次
 

友情连接

• 修改主题配置文件 新增字段

# title
links_title: 友情连接
links:
  胡伟汇个人博客: http://ithuhui.github.io/

#最后提供NEXT官方文档
文档里面写的很详细.可能有些地方有些许的错误.但是总体都是十分全面的
[ NEXT主题官方文档连接 ]http://theme-next.iissnan.com/getting-started.html