快速搭建个人博客

484 阅读3分钟

搭建一个个人博客,可以每天整理和发布自己学到的东西,也可以作为自己复习使用,赶快学起来吧!

1.搭建本地可访问博客

首先,需要现在本地将使用Hexo来将博客构建出来,可以参照官网的相关步骤。

在建立好之后,执行hexo server启动项目,通过本地的ip地址即可访问啦,访问一下试试。

IP地址: http://localhost:4000/

2.推送到Github Pages

本地可以访问之后,我们就需要将当前博客发布在Github Pages,所有人就可以通过你的 github用户名.github.io来访问这个博客了。示例如下:

wuqingc.github.io/

具体的步骤:

  1. 新建一个 repository,你的 repository 应该直接命名为 <你的 GitHub 用户名>.github.io

  2. 仓库页面新建一个source分支,作为本地博客修改的推送分支。

    这一点很重要,因为Github Pages只能识别在master分支的页面文件,所以需要将源码推送到另一个分支。

    这样编译后的页面文件就可以放置在master中了。

  3. 将你的 Hexo 站点文件夹推送到 repository 中。

  4. 前往 GitHub 的 Applications settings,配置 Travis CI 权限,使其能够访问你的 repository。

  5. 你应该会被重定向到 Travis CI 的页面。如果没有,请 手动前往

  6. 在浏览器新建一个标签页,前往 GitHub 新建 Personal Access Token,只勾选 repo 的权限并生成一个新的 Token。Token 生成后请复制并保存好。

  7. 回到 Travis CI,前往你的 repository 的设置页面,在 Environment Variables 下新建一个环境变量, NameGH_TOKENValue 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。

  8. 在你的 Hexo 站点文件夹中新建一个 .travis.yml 文件:

sudo: false
language: node_js
node_js:
  - 10 # use nodejs v10 LTS
cache: npm
branches:
  only:
    - source # build master branch only
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  on:
    branch: source
  target_branch: master
  local-dir: public

.travis.yml 推送到 repository 中。Travis CI 应该会自动开始运行,并将生成的文件推送到同一 repository 下的 master 分支下。

之后,每次source分支的变动都会被Travis CI监听到,从而自动编译推送到master分支。

站点访问

搭建完成之后,通过 https://你的用户名.github.io/ 即可访问自己的博客网站啦,除此之外,还要为博客穿上一件美丽的衣服。

主题设置

在Github搜索到你喜欢的主题后,按步骤来即可为自己的博客更换主题。

错误收集

在部署过程中,修改文件通过Travis CI 编译时不通过,遇到了如下错误:

The command "eval npm ci  " failed. Retrying, 3 of 3.

解决方式:

删除项目根目录的 package-lock.json ,并将其加入到 .gitnore,不向Github推送即可。