HexoBlog 搭建
更详细教程参考:https://easyhexo.com/
一.环境搭建
1. 安装 git
- Mac OSX下:安装Xcode即可/或者安装命令行工具
- Windows下:安装git bash
2. 安装 node.js
1)Mac OSX 下:首先安装 Ruby 环境,然后安装 HomeBrew(详情 Google)
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”
2)使用 Homebrew 安装 Node.js (注意检查 Node 版本,截止 2020.05.12 14.x 版本 会导致 hexo 部署出错)
$ brew update $ brew install node
3)Windows/OSX 下也可以进入Node.js 官网下载安装包安装
4)一般 Node modules 通常被安装在每个项目的本地文件夹 node_modules,Npm 使用(更详细的命令操作参考百度/Google)
$ npm install <package> # 安装在本地项目中 $ npm install -g <package> # 安装在全局
二.安装 Hexo(参考Hexo)
1. 初始化和安装
在 Finder 中建立新的文件夹 Hexo,cd 进入这个目录下(推荐使用 iTerm2)进行操作
$ cd /Users/weico/Hexo #这是我的电脑
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g #生成静态博客
$ hexo s #也可以指定端口$ hexo server -p 5000
2. Hexo 简单使用
1)常用命令
$ hexo new "postName" #新建文章 $ hexo new page "pageName" #新建页面 $ hexo generate #生成静态页面至public目录 $ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server) $ hexo deploy #将.deploy目录部署到GitHub $ hexo help # 查看帮助 $ hexo version #查看Hexo的版本
2)复合命令
$ hexo deploy -g #生成加部署 $ hexo server -g #生成加预览 $ hexo cl && hexo g && hexo d && hexo cl
3)命令简写
$ hexo n == hexo new $ hexo g == hexo generate $ hexo s == hexo server $ hexo d == hexo deploy
3. 部署到 GitHub
- 1)首先设置你的用户名密码
$ git config --global user.email "bu.ru@qq.com" $ git config --global user.name "bruce-sha"
- 2)生成密钥
$ ssh-keygen -t rsa -C "bu.ru@qq.com"
- 3)到/Users/用户名/.ssh 下打开.pub 文件将其添加到 Github 上的 SSH Key
- 4)执行 npm install hexo-deployer-git –save ## 安装部署所需要的插件
- 5)部署到 Github 前需要配置_config.yml 文件,首先找到下面的内容
# Deployment ## Docs: http://hexo.io/docs/deployment.html deploy: type: # 将上面内容修改为: # Deployment ## Docs: http://hexo.io/docs/deployment.html deploy: type: git #这里使用git,而不使用github repository: git@github.com:lecymeng/lecymeng.github.io.git #这是我的Github账户 branch: master #部署分支
4. 插件安装
1)sitemap 插件安装、使用-可以将你站点地图提交给搜索引擎,文件路径\sitemap.xml
$ npm install hexo-generator-sitemap
# Extensions Plugins: - hexo-generator-sitemap #sitemap sitemap: path: sitemap.xml
2)feed 插件安装、使用-RSS 的生成插件,你可以在配置显示你站点的 RSS,文件路径\atom.xml
$ npm install hexo-generator-feed
# Extensions Plugins: - hexo-generator-feed - hexo-generator-sitemap #Feed Atom feed: type: atom path: atom.xml limit: 20
5. 公益 404 页面
- 腾讯公益 404 页面-在主题的 source 目录下创建 404.html,内容如下
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8;" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="robots" content="all" /> <meta name="robots" content="index,follow" /> </head> <body> <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your site url " homePageName="回到我的主页" ></script> </body> </html>
6. 主体选择和配置
GitHub 或者在官网可以找到很多很漂亮的主题,安装对应的文档进行配置即可
也可以参考 https://easyhexo.com/ 里面所罗列到的主题,都是非常不错的
7. Q & A
1)hexo ERROR Deployer not found: github,不能部署到 github。
解决办法: 1.安装 npm install hexo-deployer-git –save; 2.将Hexo的配置文件_config.yml中的deploy 的 type由github改为git
2)生成 SSH key 时,在那个目录下执行的 ssh-keygen -t rsa -C “xxxx@xxxx.com”就会在那生成.pub 文件,并不是在.ssh 里面 QAQ
3)SSH 无法连接到 GitHub 时,尝试 ssh-add ~/.ssh/私钥文件名
4)安装的时候最好加上 sudo
Hexo 自动构建 By Travis
配置 GitHub Token
如果需要使用 travis 自动化构建你的博客,travis 自然需要读写你的 GitHub 上的 Repo。GitHub 提供了 token 机制来供外部访问你的仓库。
进入github.com/settings/tokens,生成一个供 travis 读写你的 GitHub 用的 token,至于 token 的权限,不会的直接全选了,但是不建议这样做,风险比较大,或者选择能够访问和提交仓库代码的权限即可,token 注意保密,待会会用到。
配置 Travis-CI
使用 GitHub 账号登陆 travis,在 travis 进入仓库同步管理进入 travis-ci.org/profile,打开刚才托管的 hexo 博客源码仓库同步开关
进入设置页,设置自动化编译时机,自动化编译过程中需要用到的变量。
添加必要的 Shell 变量
记住 NAME 在配置 travis.yml 会用到
编写.travis.yml 文件
.travis.yml 是 travis 平台进行自动化构建的配置文件,travis 会根据配置文件生成一个 shell 自动化脚本。
进入 hexo 博客源码本地 repo
cd hexo
touch .travis.yml
vim .travis.yml
# 指定构建环境是Node.js
language: node_js
# 指定版本,当前最新版14.x会导致hexo部署失败,改为12.16
node_js:
- 12.16.3
# 指定需要sudo权限
sudo: required
# 设置缓存文件
cache:
directories:
- node_modules
# 设置钩子只检测hexo分支的push变动
branches:
only:
- hexo
# 在构建之前安装hexo环境
before_install:
- npm install -g hexo-cli
# 安装git插件和搜索功能插件
install:
- npm install
- npm install hexo-deployer-git --save
# 执行清缓存,生成网页操作
script:
- hexo clean
- hexo generate
# 设置git提交名,邮箱;替换真实token到_config.yml文件,最后depoy部署
after_script:
- git config user.name "lecymeng"
- git config user.email "1570682285@qq.com"
# 替换同目录下的 `_config.yml` 文件中 `github_token` 字符串为travis后台刚才配置的变量,注意>此处sed命令用了双引号,单引号无效
- sed -i "s/github_token/${GITHUB_TOKEN}/g" ./_config.yml
- sed -i "s/coding_token/${CODING_TOKEN}/g" ./_config.yml
- sed -i "s/phone_number/${CODING_NUMBER}/g" ./_config.yml
- hexo deploy
修改下_config.yml 文件的 deploy 节点:
# 修改前
deploy:
- type: git
repo: git@github.com:userName/RepoName.git
branch: master
deploy:
- type: git
# github_token 会被 .travis.yml 中sed命令替换
repo: https://github_token@github.com/lecymeng/lecymeng.github.io.git
branch: master
- type: git
# 新的e.coding 只能用电话和邮箱,不能使用账户名,邮箱带@字符会导致Git链接识别错误
repo: https://phone_number:coding_token@e.coding.net/weicools/Weicools.git
branch: master
配置参考
- https://michael728.github.io/2019/06/16/cicd-hexo-blog-travis/
- http://duansm.top/2018/08/05/hexo-travis/
- https://juejin.im/post/5a1fa30c6fb9a045263b5d2a
- https://github.com/xiong-it/xiong-it.github.io/blob/hexo/.travis.yml
- https://github.com/xiong-it/xiong-it.github.io/blob/hexo/_config.yml
双线部署 GitHub+Coding
hexo deploy 时(由于部署的环境上没有配置 SSH),所以需要使用 https+TOKEN 模式 实现更快部署
GitHub 格式:https://github_token@github.com/useName/RepoName.git
Coding 格式:https://[phone_number]:[coding_token/coding_password]@e.coding.net/useName/RepoName.git
coding_password 不能带有@ 否则会导致 GitUrl 识别错误
开启 Coding Page
打开仓库设置,打开持续集成和持续部署
然后打开持续部署中的静态网站,点击立即部署,就会得到一个 coding 的博客网址
然后点击设置,配置域名,配置之前需要先在域名解析中添加 CNAME 解析道 Coding 的博客地址例如:https://xxxx.coding-pages.com,注意如果有 GitHub 的解析的话需要先删除,否则无法开启 https。(Coding Pages 申请 SSL/TLS 安全证书出现以下错误:urn:acme:error:unauthorized: Invalid response from http://www.xxxx.cn/.well-known/acme-challenge/ysOz9wW3U_GFPP8kRP4w8uknBZ9UfiUT7t2xpu9pDCw [185.199.111.153]: ,因为这种情况下,在验证域名所有权时会定位到 Github Pages 的主机上导致 SSL 证书申请失败)
配置好域名解析之后,在 Coding 中绑定域名,然后强制开启 https,开启成功后再去配置 GitHub 的解析
双线部署参考
- 新版 coding-page 与 Gridea 免费搭建个人博客
- 加速自己的 hexo,使用 GitHub+Coding 实现国内外网站加速
- 给托管在 Coding Pages 上的博客开启 HTTPS 支持 申请失败的原因
- Coding Pages 申请 SSL 证书错误