部署Hexo博客

Hexo本地环境

安装git

选择合适版本

一路”Next”,最后等待安装完成即可

安装Node.js

选择稳定版本
Node安装更加简单,还是一路”Next”,最后等待安装完成即可

查看软件版本

打开cmd命令行(win+r 输入cmd回车)分别执行,如果出现版本信息证明安装成功。

$ node -v
$ npm -v
$ git --version

安装Hexo

在电脑上新建一个blog文件夹,该文件夹用于存放你的博客文件,然后右键单击选择“Git Bash here”输入

$ npm install -g hexo-cli

验证是否安装正确

$ hexo -v

初始化Hexo

$ hexo init

修改站点配置文件

打开刚新建的博客blog根目录里,修改站点配置文件_config.yml文件,参考如下:

#博客名称
title: 我的博客
#副标题
subtitle: 一天进步一点
#简介
description: 记录生活点滴
#博客作者
author: John Doe
#博客语言
language: zh-CN
#时区
timezone:

#博客地址,与申请的GitHub一致
url: http://name.github.io
root: /
#博客链接格式
permalink: :year/:month/:day/:title/
permalink_defaults:

source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

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: true
  tab_replace:

default_category: uncategorized
category_map:
tag_map:

#日期格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss

#分页,每页文章数量
per_page: 10
pagination_dir: page

#博客主题
theme: landscape

#发布设置
deploy: 
  type: git
  #改为你的github用户名
  repository: https://github.com/name/name.github.io.git
  branch: master

更多请参考官方博客说明,修改的时候记得文件编码格式保存为UTF-8,不是的话会乱码。

发表一篇文章

$ hexo new "post-name"

会自动在刚新建的\blog\source\_posts中生成一个post-name.md文件,用编辑器打开,在里面写文章。 记住hexo中写文章使用的是Markdown语法,很方便很强大。

里面的初始内容,参考如下

title: Hello World #可以改成中文的,如“新文章”
date: 2016-03-06 16:04:09 #发表日期,一般不改动
categories: blog #文章文类
tags: [文章, 测试] #文章标签,多于一项时用这种格式,只有一项时使用tags: blog
---
#这里是正文,用markdown写,你可以选择写一段显示在首页的简介后,加上<!--more-->,
在<!--more-->之前的内容会显示在首页,之后的内容会被隐藏,点击Read more才能看到。

修改主题

如果不喜欢默认主题,可以去hexo官网找更多的主题,或github上搜hexo theme,会出来很多,里面都有介绍,以下操作简洁主题NexT为例。

下载主题

在刚新建的blog根目录中打开命令行输入命令,为的是将Next主题下载到blog目录的themes主题下的next文件夹中

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

启用主题

打开blog根目录中的_config.yml站点配置文件,修改为theme:next,language:zh-Hans

主题_config.yml配置

进入/blog/themes/next中,修改主题的_config.yml,注意不是/blog根目录中的_config.yml,具体配置请直接参考开始使用NexT主题

本地查看网站

$ hexo s -g

在浏览器输入 http://localhost:4000/查看网站,如果成功显示刚才写的文章和刚换的主题,本地环境就没问题了。其实每次更改任何站点文件,都可以先在本地运行,看看是否出现错误。

常用的Hexo命令
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客
hexo n == hexo new #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

GitHub Pages

注册github

登录到GitHub,如果没有GitHub帐号,使用你的邮箱注册GitHub帐号

创建repository

repository相当于一个仓库,用来放置你的代码文件,点击GitHub中的New repository创建新仓库,仓库名固定写法应该为:name.github.io 用户名使用你的GitHub帐号名称代替.

查看github pages

创建之后,点击setting设置远程库: 找到GitHub Pages点击Automatic page generator,等待github pages创建完成,然后输入你创建的地址name.github.io测试github pager是否创建成功。此时页面是空的没有任何东西,显示404。

配置SSH

GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

设置user.name和user.email配置信息

$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"

检查SSH keys

右键打开Git Bash输入以下指令,检查是否已经存在了SSH keys。

$ ls -al ~/.ssh

生成SSH keys

然后输入下面指令,提示设置密钥文件名,之后会询问你是否需要输入密码,输入密码之后,以后每次都要输入密码,请根据你的安全需要决定是否需要密码,如果不需要,直接回车,就出现Your public key has been saved in /c/Users/Windows/.ssh/id_rsa.pub时说明成功。

$ ssh-keygen -t rsa -C "name@gmail.com"

github上添加SSH

打开GitHub_Settings_keys 页面,新建new SSH Key,Title为标题,任意填即可,复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key。

检测GitHub公钥设置

输入以下代码进行检测,可能会看到有警告,输入“yes”就好,出现You’ve successfully authenticated,说明GitHub公钥设置成功。

$ ssh git@github.com

部署项目到github

刚刚http://localhost:4000只是在本地预览,接下是发布网站,让我们的网站可以被更多的人访问。

修改_config.yml

前面如果已经修改,可以直接跳过这一步。打开刚新建的博客blog根目录里,修改站点配置文件_config.yml文件,目的是将我们的Hexo与GitHub关联起来。修改前记得一点,hexo的配置文件中任何:后面都必须带一个空格,否则无效。打开文件,直接拉到最后,repository:填入你之前在GitHub上创建仓库的完整路径,具体添加如下:

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

安装Git部署插件

$ npm install hexo-deployer-git --save

初始化本地仓库

$ git init

连接远程仓库

$ git remote add origin https://github.com/name/name.github.io.git

如果是第一次使用git,在使用git的时候会提示输入用户名和密码,用户名是自己的注册邮箱。

推送到github page

//等于一次性执行了,清空、刷新、部署三个命令
$ hexo clean && hexo g && hexo d

创建并切换到新建分支

这里建议创建一个新的分支hexo,用于管理hexo源文件,提交的的时候只提交hexo网站html、css、等源文件,而master用来部署更新项目静态网页,添加完分支hexo后,记得把hexo设为默认分支,进去项目settings中branches,修改default branch为hexo,然后update确认修改,以后更新会用。

$ git checkout -b hexo

添加文件到本地仓库

$ git add .

提交声明

$ git commit -m ":tada: Initial commit"

将分支推送到远程仓库

$ git push origin hexo

以后每次写完文章后可以这样执行

//预览网页
$ hexo s -g 
//推送github pages 
$ hexo clean && hexo g && hexo d
//添加文件到本地仓库
$ git add .
//提交声明,添加了gitmoji表情,详情请看
$ git commit -m ":memo: Writing docs."
//推送到分支远程仓库
$ git push origin hexo

可选:添加域名

github pages的域名是name.github.io,本来是用来展示项目用的,不过现在很多的静态博客都可以给github托管后部署在这上面,省了个服务器,如果觉得域名不好记,也可以更改,不过默认的域名github强制提供https保护,如果是更改了域名的话,就不可以提供保护了,这个就看自己的需求了,当然也可以通过第三方来添加保护,就是要折腾一番了。

购买域名

域名可以自行去阿里云之类去买,会有很详细的介绍,就不废话了。

解析域名

  • 先在IP.NET中输入自己的name.github.io,查看ip地址
  • 接着在购买的域名后台添加如下两条解析
 @       A            ip
www    CNAME    name.github.io

绑定域名

登录github,找到项目,设置setting,找到GitHub Pages中的Custom Domain添加购买的域名。

添加CNAME

进入本地博客blog/source目录下,创建一个记事本文件,输入购买的域名,保存命名为CNAME ,注意保存成无后缀的所有文件,而不是txt文件,然后执行命令,就可以了访问新设的域名了。

$ hexo clean 
$ hexo d -g

可选:wordpress迁移

首先,安装 hexo-migrator-wordpress 插件。

$ npm install hexo-migrator-wordpress --save

在 WordPress 仪表盘中导出数据(“Tools” → “Export” → “WordPress”)(详情参考WP支持页面)。
插件安装完成后,执行下列命令来迁移所有文章。source 可以是 WordPress 导出的文件路径或网址。

$ hexo migrate wordpress <source>

注意这个插件并不能完美地实现WordPress->Hexo的数据转换,尤其是在处理WordPress的分类方面存在问题(见Front-matter中的分类与标签)。因此,建议您在迁移完成后,手工审阅所有生成的markdown文件,检查其中是否有错误。对于文章数量较大的WordPress站点,这项工作可能要花很长的时间。

可选:在不同电脑上更新博客

想换电脑更新博客的话,只需要先把Hexo本地环境重新部署在新电脑,接着给新电脑配置SSH密钥,最后把hexo分支中的博客源文件下载到本地,就能在本地写博客了,写完后先执行推送到github page,在执行推送源文件到source分支,就ok了,以后每次更新文章,重复执行最后四个步骤,更新博客。

//假设新电脑本地环境都配置好了,下载项目到本地,安装hexo组件
$ git clone https://github.com/name/name.github.io.git
//文件夹里保存了和远程hexo分支相同的内容
$ cd name.github.io
//查看远程和本地服务器上所有分支
$ git branch -a
//安装hexo插件,Next主题需要重新安装
$ npm install hexo
$ npm install
$ npm install hexo-deployer-git –save
//新建一篇博客,在source/post中找到新建md文件修改
$ hexo n "post-name"
//预览网页
$ hexo s -g 
//推送github pages 
$ hexo clean && hexo g && hexo d
//添加文件到本地仓库
$ git add .
//提交声明,添加了gitmoji表情,详情请看
$ git commit -m ":memo: Writing docs."   
//推送到分支远程仓库
$ git push origin hexo
//各电脑已经有博客本地仓库,在写新的博客之前,首先需要同步最新的代码
$ git pull origin hexo

参考资料

留下评论