阅读 747

2020年,必须拥有自己的博客网站(上)

很多优秀的技术人员都有自己的博客,写博客已经成了一种习惯。作为一名程序员,你,为什么要坚持写博客?答案有很多:

  • 能让人具备更好的总结能力
  • 加深自己对某项技术的理解
  • 获得别人的认可
  • 提高自己的表达能力
  • 为自己的生活留下足迹
  • 证明自己的能力
  • 开源精神
  • 用来装逼
  • ...

不管是啥理由,一个优秀的程序员都应该不断的去激励自己,在日常中检讨自己,与千万优秀人看齐,把优秀当做一直习惯。

所以,今天我们就来一步一步实现自己那独一无二的博客!

前言

搭建博客有很多种方案,可以从零开发所有功能(阮一峰的个人网站),但这有点让人头大,繁琐的事务实在是太多了:页面的编写、后台的开发、留言板的开发。。。让人难以为继!另一种方案就是基于现有的集成框架,我们只关心自己输出的文章,其他的事情都留给框架去做。

目前,这类的框架很多:WordPressJekyllVuePressHexo等等,都是很优秀的框架。今天,我们尝试使用Hexo来搭建博客。

初始化项目

在使用hexo-cli初始化项目之前,我们需要使用npm以全局安装:

npm install hexo-cli -g
复制代码

初始化一个项目:

hexo init myblog
cd myblog
npm install
hexo server
复制代码

因为网络的原因,加载的时间可能比较长,耐心等待下。

然后,访问http://localhost:4000/你的博客就这么跑起来了:

就这么跑起来了!!!很不可思议。现在有两个亟待解决的问题:

  • 一:博客外观使用的是默认的landscape主题,太死板而且容易撞衫
  • 二:我们的博客现在只是运行在本地,我们需要将之放到Github上,并且可以使用网址访问

我们先来解决问题二,我们迫不及待地想通过url来访问我们的站点了!

将代码托管到github上

针对国内访问Github网速很慢,我们也可以使用码云来托管代码,大体的配置都是相似的。只是个人觉得Github更正统一点,所以这里使用的是Github

要想将代码托管到Github上,我们需要新建一个项目:

点击New repository按钮以新建项目:

填写上仓库名称和描述,然后点击Create repository按钮:

看到这个页面,就代表仓库真的创建完成了,现在我们跟着红框中的步骤,将本地的源码推送到Github上:

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/xch1029/myblog.git
git push -u origin master
复制代码

一切顺利的话,再次访问仓库的页面,我们看到了提交的代码,这说明我们本地的源码已经push到了仓库里。

我们的目标是使用url来访问我们的博客,所以我们下一步使用的技术是github-pages,使用github-pages来展示我们的博客。

自动部署的github-pages

虽然使用的是github-pages,但是这并不意味着我们需要手动打包再手动部署,这一切繁杂的事务都让travis-ci帮我们完成吧。

简单介绍下travis-citravis-ci是一个不需要自己搭建的在线持续集成工具,其最大的特点就是能和github无缝衔接,而且是免费使用(针对开源项目)。使用起来也非的常容易,只需要在项目中添加.travis.yml配置文件

配置自动化部署

使用Github账号登录travis,然后将我们的博客仓库的开关打开,这是为了告诉travis允许使用项目中的.travis.yml以自动部署。

编写.travis.yml

在项目的根目录中添加文件.travis.yml

sudo: false
language: node_js
node_js:
  - 12 # 使用12的LTS版本
cache: npm
branches:
  only:
    - master # 只监听master分支的push
script:
  - hexo generate # 自动化构建的脚本
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN
  keep-history: true
  on:
    branch: master
  local-dir: public
复制代码

注意两点:

  • 一:在_config.yml中,第17行的root属性,需要改为和项目名字一样,这是为了保证github-pages的静态资源路径引用正确
# 17行改为:
root: /myblog/
复制代码
  • 二:在.travis.yml中我们使用了变量$GITHUB_TOKEN,这是travis能够操作Github的关键。我们需要在Github中生成一个Token,再复制到travis中:

前往Github新建 Personal Access Token,只勾选 repo 的权限并生成一个新的 Token。Token 生成后请复制并保存好。

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

这就是所有内容了!!!,将我们的代码提交了,看看有没有触发travis的自动构建:

git add .
git commit -m "add travis"
git push
复制代码

验证

现在访问地址:xch1029.github.io/myblog,其中的xch1029替换成你的Github名字。

背后的原理

其实,travis新建了一个分支gh-pages以用作展示github-pages,而分支的内容就是我们构建后的静态资源。

后续文章

因为篇幅限制(不想将文章写得太长,以免难以阅读),今天就写到这里!因为我们已经可以访问我们的博客了!

关于博文撰写、主题配置、自定义样式、自动化部署到服务器等文章,会在后续持续产出,请保持关注!