搭建个人博客

我们做事情之前最好能问问自己为什么要做这件事情,即使得到的答案是俗气的,小格局的.

我总结了自己的搭建个人博客的原因:

沉淀知识:工作7年时间(截至2021)知识沉淀做的非常的不足,希望以搭建个人博客并分享作为开端.
结交朋友:输出自己对这个世界的理解来启发他人,在这个过程中结交更多志同道合的朋友.
记录回忆:记录下生活中的美好回忆,避免自己遗忘,或许还可以留给儿子当遗产🤣.
觉得很酷:这个不解释,就是觉得有个自己的博客感觉很帅气.

选择博客框架

市面上的博客框架还是蛮多的,有 Hexo,Wordpress,Hugo 等等.最终选择了 Hugo,主要是因为它非常响亮的 Slogan.

The world’s fastest framework for building websites
— https://gohugo.io

记录回忆是一件终生事业,打包部署不够快怎么能行呢？简直是浪费生命！！

Hugo

简介

“Hugo是最受欢迎的开源静态站点生成器之一.凭借其惊人的速度和灵活性,Hugo再次使构建网站变得有趣”,这是官方给的简短的介绍.Hugo 是用 Go 语言开发一套静态站点框架,可以帮助我们快速的生成站点.Hugo网站的运行无需数据库或依赖于昂贵的运行时环境(如Ruby,Python或PHP).

Hugo的上手难度不大,但是作为一名软件工程师可以负责任的告诉你,想要玩转Hugo还是需要花不少时间研究的.如果你只是想用来做简单的内容创作,只需按步骤安装,学习Markdown就够了.如果你想要让自己的站点比较美观,就需要用到主题,官方提供了一个主题市场总有一款适合你.

安装

以MacOS为例,在命令行输入,不知道什么是brew的朋友请先安装

brew install hugo ## 安装hugo

校验你是否安装成功

hugo version ## 查看hugo版本

控制台输出hugo v0.82.0说明安装成功!

使用

快来创建第一个站点,顺便安装一个漂亮的主题吧.我重点推荐下reuixiy的MemE主题,页面整洁,文档完整.

hugo new site blog ## 创建站点
cd blog ## 进入blog目录
git init ## 初始化git,如果不知道什么是git,百度一下了解并安装它
git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme ## 安装Meme主题
rm config.toml && cp themes/meme/config-examples/en/config.toml config.toml ## 删除原来的config.toml,复制Meme主题下的示例配置文件
hugo new "posts/hello-world.md" ## 创建第一个文章
hugo new "about/_index.md" ## 在关于目录下创建一个主页文章
hugo server -D ## 启动站点

上面一大坨命令可能把很多很多没有经验的小白玩家给整懵了.不用担心,只有首次安装会比较繁琐,之后我们的日常要敲的命令一般就只有2条.

hugo new "posts/hello-world.md" ## 创建文章
hugo server -D ## 启动站点

打开浏览器在地址栏输入 http://localhost:1313 回车一下,看看属于你自己的个人博客吧.如果你想要开始创作,打开前面创建的hello-world.md文章,开始享受Markdown吧!

构建网站

云服务商

前面我们看到的是一个本地预览版的博客,如果想要自己的博客被更多的人看到,需要我们把博客给部署到云端,他人通过浏览器可以来访问.国内目前,主流的几家云服务商: 阿里云,腾讯云,百度云,华为云可以根据自己的喜好选择其中一家,一般他们的能力都大同小异所以不用太过纠结选哪家,可以参考以下2个指标做选择：

价格:每家的价格都会有一些小的差异
熟悉度:如果你之前用过其中某家的产品,建议继续用减少学习成本

如果你真的是选择困难户,每家都会提供新人的免费试用,你可以把各家试用版都体验一遍,货比三家之后再做决定.我们需要购买的云产品主要有2个:域名,对象存储(阿里云叫OSS,腾讯云叫COS).

我最终选择了 腾讯云,因为我在购买域名的时候发现腾讯云的价格更便宜,另外腾讯云的整个网站我会觉得体验更好一些,毕竟用户体验是刻在腾讯这家公司基因里的.

开始建站

对象存储(COS)

在腾讯云 COS 上创建一个存储桶用于托管静态网站,可以直接点击链接,官方的文档写的非常详细,如果还是不太会用,欢迎联系我.

关联域名

首先需要去完成注册域名的工作.域名注册好了之后需要做实名认证和域名备案,整个时间周期还是比较长的,全部搞定之后就可以自己的域名绑定到上面创建的 COS 的存储桶上了.

打包部署

hugo --minify ## 生成部署文件
tree -L 1

├── archetypes
├── assets
├── config.toml
├── content
├── data
├── layouts
├── public ## 部署文件
├── resources
├── static
└── themes

上面的命令是打包博客,生成的public目录里面就是我们要部署的文件.把public文件夹中的内容上传到OSS上申请的存储空间中,就可以通过自己的域名正常访问了.

彩蛋

如果你有一定的编程能力的话,可以通过GitHub来托管自己的博客内容,防止博客内容丢失了.当然GitHub远远不止这个功能,它提供了自动化的部署能力,可以让你在提交了博客更新之后,自动打包并且把文件上传到阿里云OSS上,这样你需要做的仅仅创造内容.

这里面会用到2个GitHub的部署脚本

以下是我自己的Action脚本内容,想偷懒的直接可以拿去.

name: Aliyun OSS Pages

on:
  push:
    branches:
      - master  ## Set a branch name to trigger deployment
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  ## Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    ## Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.91.2'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/master' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
      ## 设置阿里云OSS的 id/secret,存储到 github 的 secrets 中
      - name: setup aliyun oss
        uses: manyuanrong/setup-ossutil@master
        with:
          endpoint: oss-cn-hangzhou.aliyuncs.com
          access-key-id: ${{ secrets.OSS_KEY_ID }}
          access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
      - name: cp files to aliyun
        run: ossutil cp -rf ./public oss://jeasonkim/