首页 如何快速创建自己的博客网站
文章
取消

如何快速创建自己的博客网站

起因

毕业至今,工作已有两年有余,时常反思自己: 有时为了解决问题,到Google上找到的解决方案不知其然,却能Work;有时对一个问题思考了很久,也掌握些许知识,但脑子忘的速度赶上🚀了, 常常觉得对知识的掌握不够系统和深刻,无法形成自己的知识体系,这让我多少有点恼火,常言道:好记性不如烂笔头,既然我的记忆力跟不上了,那就记下来吧,以后查起来也方便。因此就去Google上找一些搭建博客网站的帖子,最终搭建了自己博客网站,步骤不多也不少,那就作为我的第一篇博客吧。

搭建目标

  • 良好的博客UI风格(反正我喜欢❤️)
  • 可以方便的编辑博客
  • 自动部署到Github Pages
  • 可以评论和分享博客

开始搭建博客

安装 Jekyll

创建博客网站,首推选择一个开源免费的工具,其实有很多,比如最近很火的 hexo,但是因为我更喜欢的Jekyll的风格,而且搭建起来更为简单,因此选择Jekyll。

Jekyll是一个简单的静态网站生成器,用于生成个人,项目或组织的网站。 它由GitHub联合创始人汤姆·普雷斯顿·沃纳用Ruby编写,并根据MIT许可证发布。

Jekyll的安装需要以下几条先决条件:我的电脑是macOS,这里以macOS为例,如果是别的平台可以参考这里

  • Ruby version 2.5.0 or higher
  • RubyGems
  • GCC and Make
  1. 安装Homebrew
    1
    
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    
  2. 安装chruby和最新的ruby-install
    1
    
    brew install chruby ruby-install xz
    
  3. 安装最新的ruby
    1
    
     ruby-install ruby 3.1.3
    

    这将需要几分钟时间,一旦完成,配置你的shell以自动使用chruby:

    1
    2
    3
    
    echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
    echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
    echo "chruby ruby-3.1.3" >> ~/.zshrc # run 'chruby' to see actual version
    

    如果你使用Bash,用.bash_profile替换.zshrc。如果你不确定,请阅读这个外部指南以了解你使用的是哪种shell。

重启终端,运行ruby -v查看ruby版本是否为3.1.*

如果安装成功则执行以下命令安装jekyll

1
gem install jekyll

创建网站

  1. 如果有你已经装好了jekyll,那么请你按照此处装好Git,这也是必须的。 创建基于现有主题的网站,主题相关的资源点击此处查看,基于不同的主题模版,有两种创建网站的方式:
  • 使用Chirpy Starter, 请登录Github并且进入Chirpy Start, 点击按钮 Use this template > Create a new repository 并且命名新的repo为USERNAME.github.io, USERNAME代表Github用户名,
  • Github Fork: 我选择的是第一种,此一种方式可参考此处
  1. 将你新创建的USERNAME.github.io的仓库Clone到本地。然后进入到工程根目录USERNAME.github.io,打开终端执行以下命令安装需要的包:
    1
    2
    
    bundle
    bundle exec jekyll s # build项目,成功会起本地server:http://127.0.0.1:4000/, 可以点击进去查看默认的样式验证是否在本地运行成功
    

    常用命令

    由于Jekyll是一个静态网站生成器,它必须在我们能看到它之前建立网站。运行以下任一命令来建立你的网站:

    1
    2
    3
    4
    
    # 构建网站并输出静态网站到一个名为_site的目录。
    jekyll build
    # 在http://localhost:4000,做jekyll构建并在本地网络服务器上运行,在你做任何改变时都会重建网站。
    jekyll serve
    

    现在你可以在本教程中列出的所有jekyll命令前加上bundle exec,以确保你使用Gemfile中定义的jekyll版本。 也就是:

    1
    2
    
    bundle exec jekyll build
    bundle exec jekyll serve
    

    具体的命令可以参考 Jekyll Command Line Usage

到这里恭喜你已经把网站部署到本地,但是这当然不是结果,我们还需要利用Github Action自动部署到Github pages,让git帮助我们托管。

自动部署

  1. 开启Github Action需要确认几个条件:
    • 如果你使用的是GitHub免费计划,请保持你的网站仓库是公开的。
    • 如果你已经提交了Gemfile.lock到版本库,而你的本地机器没有运行Linux,去你网站的根目录下更新lock-file的平台列表:
      1
      
      bundle lock --add-platform x86_64-linux
      
  2. 配置Github Pages

浏览到你在GitHub上的存储库。选择 “设置 “标签,然后点击左侧导航栏的 “页面”。然后,在源部分(在构建和部署下),从下拉菜单中选择GitHub Actions。

Alt text 推送任何提交到 GitHub,以触发行动工作流程。在仓库的Actions标签中,你应该看到Build and Deploy工作流正在运行。一旦构建完成并成功,网站将被自动部署。这时,你可以到GitHub指示的URL去访问你的网站。

配置网站

自定义Favicon

准备一张大小为512x512或更大的方形图像(PNG、JPG或SVG),然后到在线工具Real Favicon Generator,点击Select your Favicon image按钮,上传你的图像文件。 在下一步,网页将显示所有的使用方案。你可以保留默认选项,滚动到页面底部,点击Generate your Favicons and HTML code按钮,生成favicon。 Alt text

Alt text 下载生成的软件包,解压缩并从提取的文件中删除以下两个:

  • browserconfig.xml
  • site.webmanifest

然后复制剩余的图片文件(.PNG和.ICO),以覆盖你的Jekyll网站assets/img/favicons/目录下的原始文件。如果你的Jekyll网站还没有这个目录,就直接创建一个。再执行bundle exec jekyll s,打开server,应该可以看到icon已经变化

自定义avatar

你需要准备一张你喜欢的头像图片,放入assets/avatar.png,然后编辑_config.yml > avatar: /assets/avatar.png, 再次build你就可以讲你的头像换成自定义。

添加评论系统

我们希望交流,因此博客也要有交流,这里我使用giscus,请参考此处博客,完成评论系统的添加,并且将评论和我们的仓库discussion连接起来,亲测非常好用

自定义其他

根据需要更新_config.yml的变量。其中一些是典型的选项:

  • url
  • avatar
  • timezone
  • lang
  • other

开启第一篇博客

经过以上的步骤,你已经拥有一个自动部署自定义的博客网站,但是现在还没有一篇文章,让我们开启第一篇文章吧。

文章相关概念

在创建之前,让我们先了解一下,博客文章有哪些规则和内容

文章的创建

创建一个名为YYY-MM-DD-TITLE.EXTENSION的新文件,并把它放在根目录的_posts里。请注意,EXTENSION必须是md和markdown中的一种。如果你想节省创建文件的时间,请考虑使用插件Jekyll-Compose来完成。我这里使用jekyll-compose创建文章

jekyll-compose使用方法:

安装Jekyll-compose

添加下行到Gemfile文件后

1
gem 'jekyll-compose', group: [:jekyll_plugins]

然后执行:

1
bundle # 安装插件

常用命令

1
2
3
4
5
6
7
8
9
10
# 创建新page
bundle exec jekyll page "custom_name"
# 创建新post
bundle exec jekyll post "custom_name"
# 创建草稿
bundle exec jekyll draft "custom_name"
# 发布草稿,移到_post里面
bundle exec jekyll publish _drafts/custom_name.md
# 将发布的post,移动到草稿里
bundle exec jekyll unpublish _posts/custom_name.md

更具体的命令可以点击这里查看

为草稿和文章设置默认的front matter

_config.yml里面添加下列行,你可以自定义草稿和posts创建时需要默认添加哪些front matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
jekyll_compose:
  default_front_matter:
    drafts:
      description:
      image:
      category:
      tags:
    posts:
      description:
      image:
      category:
      tags:
      published: false
      sitemap: false

当使用上述常用命令创建文章时出了上面默认添加的front matter,还会自动添加datetitle,我自己的选择是这样的:

1
2
3
4
5
6
7
8
9
10
jekyll_compose:
  default_front_matter:
    drafts:
      description:
      category:
      tags:
    posts:
      description:
      category:
      tags:

关于编辑MarkDown

如果你也是用VSCode开发博客文章,可以按照以下操作配置Markdown编辑环境

  1. 到vscode的插件市场中,搜索Markdown关键字,安装这几个插件

Alt text Alt text

  1. 然后新建markdown文件,点击右上角如下图标即可开启快乐的编辑啦 Alt text
  2. MarkDown基本语法

结尾

如果你已经看到了这里,OK,不要犹豫,你是想记笔记的,积累说起来很简单,做起来也很简单,怕的是不做。希望这篇博客可以帮助到你,请保持在路上,Enjoy!

Alt text

参考

  1. https://jekyllrb.com/docs/
  2. https://github.com/topics/jekyll-theme
  3. https://chirpy.cotes.page/
  4. https://github.com/jekyll/jekyll-compose
  5. https://usingnow.github.io/posts/config-giscus/
  6. https://zhuanlan.zhihu.com/p/56943330
  7. https://markdown.com.cn/basic-syntax/links.html
  8. https://www.cnblogs.com/Leo_wl/archive/2012/11/05/2755677.html
本文由作者按照 CC BY 4.0 进行授权

-

-