2017-07-12

利用Hexo+github搭建个人网站的总结

花了两天的时间搭建了个人网站，记录一下搭建过程中踩过的坑，供今后参考。

前言

很多人都想要一个自己的博客网站，但奈何技术有限，条件有限。
搭建网站需要服务器、域名、DNS服务器等一大堆令人头疼的条件。
但是如果给你一个机会不需要太高的web开发技术就能DIY属于你自己的独立网站，你愿不愿意呢？|ω･`)暗中观察

利用Hexo搭建静态网页

Hexo是什么？

Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351。

静态博客编译之后是纯html页面,优点就是支持它的环境十分好找,例如github、gitcafe、七牛云存储等站点都支持静态页面托管,自然是我们的首选了。由于github page在国内访问较慢,这篇文章用gitcafe做示范。gitcafe是天朝本地化的github,同样提供展示页和域名绑定功能,不需要备案,就是爽。

但是静态博客并非没有缺点。动态博客更新文章时,脚本是不变的,只需要更新数据库。静态博客要频繁改动文件,不>支持增量式上传的东西,比如ftp,就难于管理。此外,还要十分熟悉git各种命令,才能部署页面。

总接一下使用Hexo的方便之处：

静态网页的加载速度快。
支持github gitcafe 等开源网站进行代码、资源的免费托管省去了服务器的开销。
开源网站提供了免费的域名，如果你想要自己的个性域名也可以自己购买并设置（在文章的后面会讲到）。
Hexo有许多丰富的主题，你可以在对主题的配置文件熟悉后随意的DIY。 ฅ( ̳• ·̫ • ̳) 喵

Hexo的配置

环境配置

下面进入正题 (oﾟ▽ﾟ)o
首先你要进行Hexo的配置。因为Hexo是由Node.js编写的所以你在配置Hexo前还需要安装Node.js的环境
还要安装git工具控制网站的版本，Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

下面提供了64位安装包的链接，如果你的机器是32位的（(宝ᴗ宝)不信你现在还在用32位的电脑）请自行百度下载
Hexo配置安装包-64
安装过程很简单，一路next就行了
安装完成后使用win+R打开cmd控制台输入以下指令查看git 和 node.js的版本

1
2
3

node -v
npm -v
git --version

如果出现版本信息则安装成功，进入下一步 ฅ( ̳• ·̫ • ̳) 喵

Hexo安装

在cmd控制台中输入以下指令

1	npm install hexo-cli -g

再输入

hexo -v

查看版本号，如果出现版本信息，那么至此Hexo的本地配置已经完成了 ฅ( ̳• ·̫ • ̳) 喵

生成本地网页

在任意目录下新建一个文件夹，我命名为test，然后右键选择 Git Bash Here

使用指令

1	hexo -init

进行Hexo的初始化操作，可能等待的时间比较长
初始化操作完成后会出现 “Start blogging with Hexo!”的欢迎语
之后执行指令

hexo -s

开启本地服务器它会返回一个地址提醒你拷贝到浏览器上去访问
注意这里不能使用Ctrl+c Ctrl+v进行复制粘贴，因为在git中Ctrl+c是停止的意思（很坑有木有 ( ´~` )）
这里只能老老实实用鼠标右键进行复制粘贴操作
把链接复制到浏览器的地址栏上

success
哇，这是不是很神奇，我们本地的静态网页就配置好了 ฅ( • ·̫ • ) 喵

如何进行DIY

这个界面是不是不怎么样，不够高端大气上档次，那我们该怎么样modify成我们喜欢的风格呢
打开刚才创建的文件夹，我的是 test
里面有一个”_config.yml“的配置文件

右键用记事本打开

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

哇，这是什么东西快扶朕起来 o(ﾟДﾟ)っ！
不要着急让我们一步步的分析，总共只有两个部分是我们上传代码必须要进行配置的

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

site配置

之后讲到上传代码的时候会详细讲一下这两块的配置
现在主要配置这两项

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

首先Site部分设置博客的标题、副标题、描述、作者和使用的语言
这里可以自行设置，设置language时要注意一下中文对应的代码是：zh-Hans
操作完成后别忘记save一下，然后 hexo-s开启本地服务器查看一下效果

hexo -s

这条指令的完整写法是 hexo -server
今后我们写文章时在本地可以预览之后再发布到GitHub上

theme配置

我们可以在GitHub上搜索合适的主题copy到当前项目目录下的themes文件中
这里我直接使用代码进行下载

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

之后就很简单了，我们只需要配置文件中的 theme: landscape 变成 theme: next(这是我下载的主题名)
部署本地服务器看一下效果吧
不同的主题也有自己的配置文件，大家可以自己百度搜索合适你的主题及配置方法，我这里就不多说了
熟悉主题之后，我们可以自己修改 css样式 javascript源码打造你自己的博客！ (◕ᴗ◕✿)

将Hexo生成的静态网页发布到GitHub上

注册GitHub账号并新建一个项目

博客可不光光是用来给自己看的，我们还要部署到网络中与千千万万的同胞分享 (((;꒪ꈊ꒪;))
百度搜索GitHub注册一个账号，登陆后点击右上角的加号选择 “Create a new repository ”
在“Repository name”中填入你的用户名，注意这里的名称一定要与前面的 owner的名称一致不然你就无法通过 yourusername.github.io 的方式访问你的博客了，也会给之后的配置造成麻烦
接着勾选“Initialize this repository with a README”完成创建 (◕ᴗ◕✿)

配置文件的修改

之前的配置文件有两处是上传必需修改的

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

第一项 URL 按我的步骤走下来的话，只需要修改其中的 url
将它修改为这样的形式：http://+你刚刚创建的GitHub用户名+github.io
第二项 Deployment需要修改成以下格式

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: https://github.com/zzchong2233/zzchong2233.github.io.git
  type: git
  branch: master

其中deploy的地址其实就是你刚刚新建的项目地址，复制过来就行
我们之后的操作就是将本地的代码上传到这个地址并在指定的url解析出来
嗯，大致这两步设置就是这个意思 (oﾟ▽ﾟ)o

上传本地代码

网上有许多上传的方法，可能是版本更新的问题导致好多方法我测试的时候都不起作用，这里介绍一种我总结出来的方法，没有那么多的步骤，但满足了基本的需求。
gitbash到本地的项目

1	hexo -clean && hexo -d

清理缓存并发布到deploy的地址
第一次发布时会弹出一个窗口，输入你的GitHub账号密码即可
然后就是上传，这时候就要看你的网速了，由于GitHub是国外网站所以上传速度可能是时快时慢
输入完账号后可能出现提示消息 “tell me who you are”然后会提示你运行两条指令，先不用管等上传结束后再copy一下这两条命令（原样复制粘贴运行就行了不要做多余的操作）之后上传的时候就不会有这条警告了

设置GitHub Pages

登录到你的项目地址，在上方有一个setting按钮

往下翻有一项 GitHub Pages

点选第一个source下拉框里面应该只有一个分支 master 选中之后保存
稍等一会，在浏览器的地址栏中输入你的域名 name.github.io 就可以看到你DIY的blog了 ฅ( ̳• ·̫ • ̳) 喵