Jekyll + GitLab + AWS(macOS 12.0.1)

从零开始通过Jekyll+git+AWS搭建一个静态个人博客.

Published on November 28, 2021 by shadershader

gitlab jekyll AWS Amplify

2 min READ

关于Jekyll,Hexo,Hugo的比较网上很多，就不一一对比了，这里之所以选择Jekyll主要有两个原因：一个是被GitHub深度集成了，各大云厂商也支持构建。另外一个是而本地Ruby环境本身我会用到也需要折腾一下。搭建过程整体还算比较顺利，主要是处理各模块的版本环境。框架流程为环境处理/运行服务/主题更换/云构建。

环境：

  • Jekyll

  • GitLab

  • AWS Amplify

说明：

1. 对于Jekyll的安装，官网有资料(http://jekyllrb.com/docs/)，坑比较多，记录如下：

  • 查看各环境版本

    $ ruby -v
ruby 2.x(这里macOS自带了2.x的ruby)
$ gem -v
3.2.32
$ gcc -v
$ g++ -v
$ make -v
GNU Make 3.81

  • 更新切换buby版本准备环境

    # 先确定xcode command line环境
$ xcode-select --install
$ brew install ruby
# 不建议用rvm,brew足够,就部署个环境不需要搞那么复杂
# 安装过程中会提示如何切换到,提示类似这样(错过了就reinstall)：
$ echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc
# 再查看版本发现已经切换到了新版本,此时再进行下一步,否则安装Jekyll会出问题(openssl找不到等)
$ ruby -v
ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [arm64-darwin21]
# 更新gem
$ gem update --system
$ gem install bundler
$ bundler -v

  • 安装Jekyll：以上都准备好了到现在Jekyll的官方文档才有真的有用

    # 安装jekyll
$ gem install jekyll bundler
# 新建博客(任意一个你喜欢的路径下,上面环境不对这里过不去)
$ jekyll new blog
# 进入到博客目录
$ cd blog
# 上面brew了新的ruby,3.0以上需要附加依赖到工程
$ bundle add webrick
# 此时可以启动本地服务, --livereload可以不加，作用是热重载更新
$ bundle exec jekyll --livereload
# 到此结束，打开 http://localhost:4000
  
# 可以安装jekyll-admin
$ gem install jekyll-admin
# 如果遇到jekyll-admin版本有问题，需要在对应主题下的Gemfile,Gemfile.lock中修改正确的版本号
  
# 关于主题，直接git clone或者download zip，然后执行下面的命令
$ bundle install
$ bundle add webrick
# 最后启动服务测试一下
$ bundle exec jekyll serve
# 没问题就可以定制配置了
# 最好设置时区(因为默认会skip未来的博客,本地生效上传到git可能无效),格式如下:
# timezone: Asia/Shanghai
2. GitLab相关

  • 新建repo，拉取如果授权有问题，用git@gitlab.com:username/reponame.git拉不到：

    # 清理 ~/.ssh/known_hosts，打开把没用或者不确定的删掉，都没用就清空
$ sudo vim ~/.ssh/known_hosts
$ cd 到想要clone的目录下
$ git clone repo路径，中间提示直接过去，成功

  • 关于报错找不到git源：

    curl: (7) Failed to connect to raw.githubusercontent.com port 443

    是由于目标DNS 解析被污染，导致DNS 解析过程无法通过域名取得正确的IP地址。解决方案是打开：https://www.ipaddress.com/ 输入访问不了的域名，这里输入：raw.githubusercontent.com，得到结果：

    raw.githubusercontent.com resolves to the following 4 IPv4 addresses:
185.199.108.133
185.199.109.133
185.199.110.133
185.199.111.133
# 将上面的结果加域名添加到hosts文件下：
185.199.108.133 raw.githubusercontent.com
185.199.109.133 user-images.githubusercontent.com
185.199.110.133 avatars2.githubusercontent.com
185.199.111.133 avatars1.githubusercontent.com
$ vim sudo /etc/hosts
# 我这里直接把四个地址都用了，一般用一个就可以，最后看一下结果
$ cat /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost
  
185.199.108.133 raw.githubusercontent.com
185.199.109.133 user-images.githubusercontent.com
185.199.110.133 avatars2.githubusercontent.com
185.199.111.133 avatars1.githubusercontent.com

  • 没问题后把blog上传到repo

3. AWS Amplify部署
  • AWS后台找到Amplify，new一个Host web app。
    # 从GitHub,Bitbucket,GitLab,AWS CodeCommit, Deploy without Git provider来创建
# 授权导入即可
# build成功后会生成对应的Domain,可以直接浏览器中打开访问
# 完成
  • Domain management(主要为了开启HTTPS,只做CNAME无需这么费事)
    # 点击Add domain
# 输入域名,如:shadershader.com
# Configure domain及以后步骤根据操作来做就行了
# 最后开启https进行SSL验证,主要三步配置十分简单不说了,不立即生效需要等会

4.完成,可以通过域名访问HTTPS的个人blog