HexoBlog搭建


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 注意保密,待会会用到。
-w1028

配置 Travis-CI

使用 GitHub 账号登陆 travis,在 travis 进入仓库同步管理进入 travis-ci.org/profile,打开刚才托管的 hexo 博客源码仓库同步开关
-w682

进入设置页,设置自动化编译时机,自动化编译过程中需要用到的变量。
-w1015
-w1171

添加必要的 Shell 变量
-w1475
记住 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

配置参考

双线部署 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

打开仓库设置,打开持续集成和持续部署
-w1760
然后打开持续部署中的静态网站,点击立即部署,就会得到一个 coding 的博客网址
-w1893
然后点击设置,配置域名,配置之前需要先在域名解析中添加 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 证书申请失败)
141psU
配置好域名解析之后,在 Coding 中绑定域名,然后强制开启 https,开启成功后再去配置 GitHub 的解析
-w1578

双线部署参考

参考教程


文章作者: Weicools
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Weicools !
评论
 上一篇
Mac OS X 终端命令学习 Mac OS X 终端命令学习
Mac OS X 终端命令学习 显示当前目录的路径 pwd
2015-12-29 Weicools
本篇 
HexoBlog搭建 HexoBlog搭建
HexoBlog 搭建更详细教程参考:https://easyhexo.com/ 一.环境搭建1. 安装 git- Mac OSX下:安装Xcode即可/或者安装命令行工具 - Windows下:安装git bash
2015-11-24 Weicools
  目录