Hexo+GitHub搭建免费博客

Created at 2016-03-14 Updated at 2017-01-06 Category Hexo Tag Hexo

第一部分 基本介绍

一直想自己搭建一个博客,断断续续,折折腾腾了两天多的多时间,终于算是搭建完毕了.

为什么要搭建博客呢?

  • 想有个属于自己的博客空间
  • 世面上的平台不够好看
  • 佩服那些有博客的人,所以自己也想搞一个
  • 独立的才是自己的。
  • 但是不懂服务器,没有空间,不懂前端怎么破?

小白进入门槛
1、非常折腾，需要耐心；
2、也需要一定的学习能力和钻研精神；
3、懂一些网页基础知识

本博客是利用 Hexo +Github搭建,主题是 Next ,感觉不错,不需要什么上面所说的知识,也能搭建成功,方便也美观

为什么选择GitHub Pages？

很多人用wordpress，你为什么要用github pages来搭建？

  • github pages有300M免费空间，资料自己管理，保存可靠；
  • 学着用github，享受github的便利，上面有很多大牛，眼界会开阔很多；
  • 顺便看看github工作原理，最好的团队协作流程；
  • github是趋势；
  • 就算github被墙了，我可以搬到国内的gitcafe中去。

搭建需要懂得github基本操作

不会GitHub的参考如下文章：

第二部分 Hexo+GitHub搭建博客

环境准备

  • 安装Node
    到Node.js官网下载相应平台的最新版本，一路安装即可

  • 安装Git

  • GitHub

    • 首先注册一个『GitHub』帐号，已有的默认默认请忽略
    • 建立与你用户名对应的仓库，仓库名必须为『your_user_name.github.com』
    • 添加SSH公钥到『Account settings -> SSH Keys -> Add SSH Key』

  • 首先设置你的用户名密码：
    git config --global user.email "4353@qq.com"
    git config --global user.name "653b"

  • 生成密钥：
    ssh-keygen -t rsa -C "faa@qq.com"

    最后可以验证一下：ssh -T git@github.com

  • 安装

Node和Git都安装好后，可执行如下命令安装hexo：

npm install -g hexo

  • 初始化

执行init命令初始化hexo到你指定的目录：
hexo init <folder> 也可以cd到目标目录，执行hexo init。

至此，全部安装工作已经完成！

  • 生成静态页面

cd 到你的init目录，执行如下命令
hexo generate

  • 本地启动

执行如下命令，启动本地服务，进行文章预览调试

hexo server
浏览器输入http://localhost:4000就可以看到效果

  • 写文章

执行new命令，生成指定名称的文章至hexo\source_posts\postName.md

hexo new [layout] "postName" #新建文章

其中layout是可选参数，默认值为post。有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称。当然你可以添加自己的layout，方法就是添加一个文件即可，同时你也可以编辑现有的layout，比如post的layout默认是hexo\scaffolds\post.md

1
2
3
title: { { title } }
date: { { date } }
tags:

想添加categories，以免每次手工输入，只需要修改这个文件添加一行，如下：

1
2
3
4
5
title: { { title } }
date: { { date } }
categories: 
tags: 
---

接下来，你就可以用喜爱的编辑器尽情书写你的文章

实现fancybox效果

只需要在你的文章*.md文件的头上添加photos项即可，然后一行行添加你要展示的照片：

1
2
3
4
5
6
7
layout: photo
title: 我的阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg

不想每次都手动添加怎么办？同样的，打开您的hexo\scaffolds\photo.md

1
2
3
4
5
>layout: { { layout } }
title: { { title } }
date: { { date } }
tags: 
photos:

然后每次可以执行带layout的new命令生成照片文章：

hexo new photo "photoPostName" #新建照片文章

- 主题安装

hexo的主题列表Hexo Themes。
比较喜欢pacman，modernist、next。Pacman最为优秀，简洁大方小清新，同时移动版本支持的也很好

安装主题的方法就是一句git命令：

1
git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

安装完成后，打开hexo\_config.yml，修改主题为modernist

打开hexo\themes\modernist目录，编辑主题配置文件_config.yml：

  • 更新主题

cd themes/modernist
git pull

hexo命令行使用

常用命令：

  • hexo help #查看帮助
  • hexo init #初始化一个目录
  • hexo new "postName" #新建文章
  • hexo new page "pageName" #新建页面
  • hexo generate #生成网页，可以在 public 目录查看整个网站的文件
  • hexo server #本地预览，’Ctrl+C’关闭
  • hexo deploy #部署.deploy目录
  • hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy

简写：

  • hexo n == hexo new
  • hexo g == hexo generate
  • hexo s == hexo server
  • hexo d == hexo deploy

第三方服务

  • 图床

1.墙裂推荐七牛云储存,注册地址。
2.七牛云储存提供10G的免费空间,以及每月10G的流量.存放个人博客图片最好不过了
具体使用见使用七牛作为github博客的图床

  • 域名
  • 将独立域名与GitHub Pages的空间绑定
  • 方法一：在站点source目录下面，新建一个名为CNAME的文本文件，里面写入你要绑定的域名，比如wuxiaolong.me
  • 方法二：在Repository的根目录下面，新建一个名为CNAME的文本文件，里面写入你要绑定的域名，比如wuxiaolong.us
  • DNS设置
    用DNSpod，快，免费，稳定。
    注册DNSpod，添加域名，如下图设置。

其中A的两条记录指向的ip地址是github Pages的提供的ip
如何知道你的github上项目的IP

去Godaddy修改DNS地址
更改godaddy的Nameservers为DNSpod的NameServers。

至此，基本操作介绍完毕，以下内容普通用户无需了解

  • 目录介绍

默认目录结构：

1
2
3
4
5
6
7
8
9
10
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json
  • .deploy：执行hexo deploy命令部署到GitHub上的内容目录
  • public：执行hexo generate命令，输出的静态网页内容目录
  • scaffolds：layout模板文件目录，其中的md文件可以添加编辑
  • scripts：扩展脚本目录，这里可以自定义一些javascript脚本
  • source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
    • _drafts：草稿文章
    • _posts：发布文章
  • themes：主题文件目录
  • _config.yml：全局配置文件，大多数的设置都在这里
  • package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

- 修改局部页面

页面展现的全部逻辑都在每个主题中控制，源代码在hexo\themes\你使用的主题\中，以modernist主题为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-CN.yml      #中文语言
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _partial       #局部的布局，此目录下的*.ejs是对头尾等局部的控制
|   └── _widget        #小挂件的布局，页面下方小挂件的控制
├── source             #源码
|   ├── css            #css源码 
|   |   ├── _base      #*.styl基础css
|   |   ├── _partial   #*.styl局部css
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #*.styl引入需要的css源码
|   ├── fancybox       #fancybox效果源码
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道

- 插件

  • 安装插件：npm install <plugin-name> --save
  • 启用插件：在*hexo_config.yml文件添加：
  • plugins: - <plugin-name> #插件名
  • 升级插件： npm update
  • 卸载插件：npm uninstall <plugin-name>
  • 迁移
    hexo支持从其他类型站点迁移，如通用RSS，Jekyll，Octopress，WordPress等。请参考官方文档Hexo Migration。
  • 更新
    • 更新hexo：npm update -g hexo
    • 更新主题：cd themes/你的主题 git pull

- 换机器写博客

保留好自己的博客源码。换机器写博客，就只能使用各种网盘的同步功能，或者你把你的站点源文件提交到某代码托管服务器。另外，貌似这篇很牛逼，Hexo 服务器端布署及 Dropbox 同步。

办法是这样的，先在一个目录下做好Node+Git+Hexo的绿色环境，写个hexos.bat可以一键启动hexo工作台，把整个目录用Dropbox同步，这样随便在办公室或家的任何笔记本台式机都可以写博客，也不用处理什么文件拷贝备份的事情

问题详解

总结

  • 对于一个不懂什么服务器,什么前端的人来说,Hexo+Github给搭建个人博客带来了很大的便利.
  • 搭建博客不是心血来潮,也并不是一帆风顺的,所以需要耐心,折腾得起才行.
  • 很多教程已经过时,多看官方文档.
  • 搭建博客并不是必须,写笔记文章找个平台也是可以的.
  • 搭建博客才是第一步,坚持写好文章才是关键,路还很长.

参考：

Table of Content

  1. 第一部分 基本介绍
  • 为什么选择GitHub Pages？
    1. 第二部分 Hexo+GitHub搭建博客
  • - 主题安装
  • hexo命令行使用
    1. 第三方服务
    2. 至此，基本操作介绍完毕，以下内容普通用户无需了解
  • - 修改局部页面
  • - 插件
  • - 换机器写博客
    1. 问题详解
  • 总结
  • 参考：
    • Site by Poetry using Hexo & Random
    © 2015 - 2017

    技术改变生活

    Hide