SuperTestman_博客已迁移

基于Hexo+Github Pages的博客搭建

2016-12-30  本文已影响624人  指間的Coding

一、前言

1、技术选型

搭建个人博客通常有如下选择：
WorkPress
GitHubPages + Jekyll
GitHubPages + Hexo
对上面提到的三种个人博客搭建方案做了简单的了解之后，我选择了 GitHubPages + Hexo
主要是出于以下几点考虑：

2、Hexo 简介

特点：

二、搭建环境&软件

1、本机系统：Windows 10 Pro（64位）
2、Node.js：v6.9.2LTS（64位）
3、Git：Git-2.11.0-64-bit.exe（64位）
4、Github账号：https://github.com/
5、IntelliJ IDEA 16.0.3：https://www.jetbrains.com/idea/

三、博客搭建

【思路】
1、安装Git、Node.js环境以及Hexo框架
2、创建Hexo项目，并本地运行查看效果
3、修改项目配置文件（根目录下的_config.yml文件）
4、安装Hexo框架主题（推荐：Next或yelee主题），对主题进行配置，主要是修改theme目录下的_config.yml文件
5、将本地设置好的Hexo项目发布到Github Pages上

Git安装

Node.js安装

Hexo框架安装
Hexo 是今天的主角，先打开 Hexo 官网


官网首页的命令就是用来安装Hexo框架的
【说明】如果你已经把Node.js的镜像源更换成淘宝镜像源了，则可以把npm换成cnpm 
npm install hexo-cli -g    #原始命令
或
cnpm install hexo-cli -g   #更换淘宝镜像后的命令

npm install hexo-cli -g    #原始命令
或
cnpm install hexo-cli -g   #更换淘宝镜像后的命令

【说明】Hexo 安装时间不一定很快，有可能需要等 3 ~ 5 分钟，安装完有 WARN 警告也没关系的。

创建Hexo项目（本地博客）

hexo init Hexo        //hexo init +你的项目名称，如我的为Hexo

执行完上述命令后，进入刚创建的Hexo项目目录

cd Hexo      //进入Hexo目录
npm install  
或
cnpm install

安装完成之后，【D:\Develop\IdeaProjects\Hexo】目录结构是这样的：

到此为止，一个博客就已经搭建好了，现在我们启动 hexo 本地服务，看下默认的博客是怎样的，命令如下：

hexo server   //启动hexo本地服务

在浏览器中输入：http://localhost:4000/进行访问，效果图如下：

如果要停止 hexo 服务：在 Git Bash 下按 Ctrl + C即可

安装其他主题

git clone https://github.com/iissnan/hexo-theme-next themes/next
或在 Mac 上
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

这样就在 【D:\Develop\IdeaProjects\Hexo\themes】目录下生成了一个 next 文件夹，里面有我们刚刚 clone 下来的主题内容。

cd D:/Develop/IdeaProjects/Hexo/themes/next
git pull origin master

注意：该配置文件中的键值之间一定要有空格，否则轻则没有作用，重则报错，无法启动。

hexo generate      //重新生成静态博客的所有内容
hexo server        //重启 hexo 本地服务

重新访问：http://localhost:4000/，效果如下图：

四、将本地博客发布到Github Pages###

创建Github Pages并SSH授权

把本地的博客内容同步到 Github 上

cd D:/Develop/IdeaProjects/Hexo              //进入Hexo项目目录
npm/cnpm install hexo-server --save         //创建
npm/cnpm install hexo-deployer-git --save    //安装自动部署发布工具

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 这一块区域主要是设置博客的主要说明，需要注意的是：每个冒号后面都是有一个空格，然后再书写自己的内容的
title: JayYang Code
subtitle: 这里只有代码相关，要了解更多 >>> jayyang.xyz
description: 江湖梦，断肠情，人未尽，杯莫停
author: 指間的Coding
email: 695834706@qq.com
language: zh-CN
timezone:

# URL,这一块一般可以设置的是 url 这个参数，比如我要设置绑定域名的，这里就需要填写我的域名信息
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.jayyang.xyz
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:

# 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: next

# Deployment
## 这里是重点，这里是修改发布地址，因为我们前面已经加了 SSH 密钥信息在 Github 设置里面了，所以只要我们电脑里面持有那两个密钥文件就可以无需密码地跟 Github 做同步。
## 需要注意的是这里的 repo 采用的是 ssh 的地址，而不是 https 的。分支我们默认采用 master 分支，以后你翅膀硬了要换其他也无所谓。
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:Yang-Jay/Yang-Jay.github.io.git
  branch: master

cd D:/Develop/IdeaProjects/Hexo   //进入Hexo项目目录
hexo clean                        //先清除掉已经生成的旧文件
hexo generate                     //再生成一次静态文件
hexo server                       //在本地预览下
hexo deploy                       //本地没问题之后，Ctrl + C 停掉本地预览，使用部署命令部署到 Github 上

由于要经常要使用上面的命令来发布部署，所以有简写：
hexo clean == hexo clean
hexo generate == hexo g
hexo server == hexo s
hexo deploy == hexo d

访问服务器地址进行检查：http://yang-jay.github.io/，该访问地址是之前在github上的创建的仓库名称，输入你的github用户名 + .github.io

五、绑定域名###

【具体可以参考：GitHub Pages绑定顶级域名的方法、怎样将域名绑定到github pages 博客上】

结束语

Markdown 编辑器
Windows 上推荐：HaroopadSmarkMarkdownPad
Mac OS 上推荐：Mou
在线资源推荐：简书作业部落马克飞象

Markdown语法参考
Markdown 语法说明(简体中文版)Markdown——入门指南markdown写作中的常见问题
提示：更简单的学习方法上是直接用示例修改，可参考：作业部落 或者马克飞象 的示例文稿。

思维导图
Windows 上推荐：Mindjet
Mac OS 上推荐：XMind
在线资源推荐：ProcessOn百度脑图MINDPIN

Hexo 相关资料
Hexo官网
hexo常用命令笔记

Next 相关资料
hexo-theme-next
Next 使用文档

更多主题
Hexo Themes
有哪些好看的 Hexo 主题？

第三方服务
站长工具
百度站长工具
站长之家工具
360云监控

数据统计
百度统计
不蒜子

注意事项

  1. Git 的 bug
    有个老版本的 Git 有个 bug，上传的时候会提示非法域名这类的，要解决该问题，最简单的方法就是更新 Git，用最新版的 Git
  2. 特殊字符导致报错
    如添加新博客的时候报错了，而且提示的是 js 中某些地方报错，那么很可能是 md 文件中存在特殊字符（不是正常显示的字符，不是说特殊符号，能正常显示的都不是这里说的特殊字符），把特殊字符删除即可
  3. Hexo 命令的常见报错
    可以参考这篇文章：HEXO+Github,搭建属于自己的博客
  4. 使用hexo，如果换了电脑怎么更新博客？
    这个问题相信大家都关心，知乎上有比较详细的解答。我说一下我的解决方法吧！
    方案一：
    在新电脑上配置好本地博客环境，然后，直接拷贝原电脑上的 xxx.github.io 文件夹到新电脑上即可。
    方案二：
    将 xxx.github.io 文件夹同步到网上(如：Dropbox 等)，其他任何电脑（配置好了本地博客环境）要用的时候，从网上同步下来即可。
上一篇 下一篇

猜你喜欢

热点阅读