博客

互联网最大的特点就是共享，身为一名开发人员，从网上也学了不少知识，也想开始弄一下个人的博客，写一些东西，回馈一下社会。。

博客是怎样的呢？

博客其实分两部分：博客网站和本地格式化工具（静态网站生成技术）。在本地用markdown写好文章，用静态网站生成技术，生成对应的html，把这些html放到服务器，服务器通网，别人就和访问网页一样可以访问这些文章了。说白了，博客其实也是一种web应用。

理解了这个概念，那搭建博客就是写一个web应用然后部署而已。当然博客作为一种比较流行的东西，肯定会有一定的流程简化，不再需要博客主手写代码，所以有了现在搭建博客的流程：文章通过工具变成页面，页面通过部署显示在线上。

博客网站，指的是别人从什么网站浏览你的博客，一般有几种方式：

  • 购买域名和服务器，纯粹的个人网站。想怎么样展示，写好html，当作web即可，可以弄得非常花里胡哨。
  • 依附github，使用GitHub Page。GitHub提供的个人静态网站（域名加服务器加部署）。
  • 依附各大技术交流平台，如掘金，CSDN等

静态网站生成技术，也就是提供一个数据源（可以是markdown，liquid，html等文件），这种工具就可以渲染成一个对应的静态页面，即html，放到浏览器中可以直接展示。其实就是工具写web页面。一般以下有几种：

  • Jekyll，用Ruby写的，所以安装的话，需要先安装Ruby环境，比较麻烦。
  • hugo，据说是用golang写的。
  • hexo，用nodejs开发，所以对于前端来说，可能更容易懂一些。
  • 。。。

博客搭建（Github Pages和hexo）

最终使用是这样的：

  1. 生成写作文件，比如要写一篇article为题的博客（可以是中文）

    1
    hexo new article

  2. 写作并保存文件

  3. 生成文章对应的html文件

    1
    hexo g

  4. 部署上线

    1
    hexo d

  5. 刷新自己的Github Page即可。

Github Page

  1. 首先必须拥有自己的GitHub 账号

  2. 在GitHub上创建一个远程仓库（私密性为public的），仓库名称要有<username>.github.io，<username>指的是GitHub账户名

  3. 将这个仓库克隆到本地，本地随便写一个html文件并命名为index.html，然后推送到这个仓库

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        test
    </body>
    </html>

  4. 打开网站https://username.github.io/ ，username用GitHub的账户名，可以看到页面只显示了文字test，整个页面就是刚刚所写html文件。

以上就是GitHub Page的操作和作用，把一个远程仓库部署到对应username.github.io域名下。

更多可以去官网上查看

利用Github Page这个特性，那么就可以实现一个博客（网站） 了，用index.html作为一个首页入口，可以跳转到其他文件里面的文章（html文件）即可。只要弄好一个Github Page的远程仓库，那么剩下主要的工作其实就是本地要写好这些逻辑（html）——用hexo做，然后上传到这个远程库。

Hexo

安装

事先需要安装一下Nodejs，因为hexo是用Nodejs写，安装hexo可以直接用Nodejs的包管理器npm，所以前置环境是Nodejs，Nodejs包含了其包管理器npm。安装Nodejs ，参考

因为hexo是要和git一起使用的，比如hexo deploy就涉及到了推送到对应的远程仓库操作。所以事先也要安装Git，参考

接下来是真正安装hexo

1
npm install -g hexo

使用

前面所提的是怎么写作和发布，那么现在还需要补充一下，怎么开始

  • 首先，物色好文章存放地点，如本文使用D:\tmp\myblog，那么就在D:\tmp\下进入命令行输入命令

    1
    hexo init myblog

  • 然后就会出现myblog文件夹，其子目录及用处如下

    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml   // 这里存放的就是博客的一些配置
    ├── package.json  // nodejs使用npm管理的包信息
    ├── scaffolds     // 模板，hexo应用自己本身的模板；即根据这些模板了创建对应的文章
    ├── source		  // 源，编写的文章存放（md文件）
    |   ├── _drafts
    |   └── _posts
    └── themess		  // 主题存放文件夹

  • 在_config.yml配置好远程仓库（Github Page的仓库）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ...


    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
        type: 'git'
        repo: https://github.com/username/username.github.io
        branch: master

  • 然后就可以使用（在本目录下按之前所提步骤写作，推送即可）

主题

所谓主题，即博客的样式。

hexo中的主题，是存放在博客目录下的themes下的，可以存放多个，但是只能使用一个，使用时在配置文件_config.yml中配置使用。

怎么用？

  1. hexo提供了一个平台，让使用者自己开发主题，并开源给其他人用。可以在这里查看，点击图片预览，点击标题跳转到主题的GitHub 仓库。克隆仓库到themes目录下，如（还是用D:\tmp\blog做本地博客存放位置）:

    1
    D:\tmp\blog\themes> git clone https://github.com/henryhuang/oishi.git

  2. 然后配置使用在这个主题，在blog/_config.yml

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: oishi

随记

  • GitHub Page的远程仓库顶层的index.html文件是GitHub Page的入口，所有文件都会被放到username.github.io下。

  • hexo是由默认主题的，若配置文件没有配置，则会使用默认的配置。或者说，主题是hexo必不可少的，自主开发主题就会发现，其实主题就是一些js模板（此模板和hexo模板不同），nodejs根据这些js模板最终拼凑hexo首页，文章等多个页面的html。由此可推测，其他的静态网站生成技术类似，都是利用模板，然后拼凑出html代码，最终写入文件即可。这大概就是这类工具的本质了。

  • 使用评论功能，这个功能是可以导入的。市面上评论功能是作为一种服务的，去对应平台就可以获取对应的配置，然后添加一些固定的代码即可使用评论，比如使用一个gitalk作为评论（和GitHub的issue关联的）

    • 申请一个OAuth application，取得client ID和client secret，然后给到gitalk；指定这里将会用到GitHub的授权，使其可以使用git issue，进行评论。具体参考

      1. 进入 https://github.com/settings/applications/new 中填写表单
      2. 记录下client ID和client secret，须要当场记录，刷新就再也不可见了。

    • 在对应地方添加

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <section class="comments" id="comments">
          <div id="gitalk-container"></div>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
          <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
          <script>
              let admins = 'username1,username2'
              let arrPathName = (location.pathname).split("/")
              let gitalkID = ''
              for (let i = arrPathName.length - 1; i >= 0; i--) {
                  if (arrPathName[i] != '') { gitalkID = arrPathName[i].substring(0, 49); break }
              }
              var gitalk = new Gitalk({
                  clientID: '**',
                  clientSecret: ''****'',
                  repo: 'username.github.io',
                  owner: 'username',
                  admin: admins.split(','),
                  id: gitalkID, // 这里要少于50个字符
              })
          
              gitalk.render('gitalk-container')
          </script>
      </section>

    其实也即，要在hexo中添加评论，只需要在对应的主题模板文件中插入对应的评论功能代码即可

参考

Github Page

Hexo

最后更新： 2021年08月03日 10:39

原始链接： https://idkhts.github.io/2021/07/16/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/