Hexo+Github+Ocean 小白的博客搭建笔记

工具方法

fig.0 题图

这是小白搭建博客的学习笔记。其实网络上已经有很多教程了，按照上面的要求，一步一步就可以完成自己的博客搭建。这里记录一下流程和问题。

1. 准备工作：注册Github

  • 首先需要注册Github账号，利用GitHub Pages搭建博客。

  • 新建yourname.github.io的repository，下拉设置里选择GitHub Pages，设置主题。再次回到GitHub Pages，博客页面就搭建成功了。这里就已经可以用md文档发布博客了。之后我们进一步安装Hexo，让写博客更方便。

  • 安装Node.js

  • 安装Git。用于将本地的网页文件上传到github。

2. 安装Hexo，连接Github与本地

  • 安装Hexo，选择本地文件夹，储存博客文件

    在合适的地方新建一个文件夹，用来存放自己的博客文件，比如我的博客文件都存放在D:\study\program\blog目录下。

    在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不要用Windows自带的控制台了。

    定位到该目录下，输入npm i hexo-cli -g安装Hexo。会有几个报错，无视它就行。

    安装完后输入hexo -v验证是否安装成功。

    然后就要初始化我们的网站，输入hexo init初始化文件夹，接着输入npm install安装必备的组件。

    这样本地的网站配置也弄好啦，输入hexo g生成静态网页，然后输入hexo s打开本地服务器，然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦，效果如下：

    来源: 韦阳的博客
    链接: https://godweiyang.com/2018/04/13/hexo-blog/

  • 连接Github与本地。参见上面韦阳的教程

  • 写文章、发布文章。md文档存放在source/_post 文件夹中，在博客根目录下打开git bash，hexo g生成静态网页，hexo s可以本地预览，hexo d上传到github。

3. 博客基本信息

至此，博客基本搭建完成，只剩下美化工作。博客文件夹中主要关注三个地方，根目录下的_config.yml，用于配置博客基本信息。

# Site
title: Yao 知言
subtitle: 言不由衷
description: 一个写作、记录的小站，督促自己
keywords: 
author: yaosaid

source文件夹则用于存放各种页面，文章都存放在source/_posts文件夹。

themes存放主题。把hexo.io/themes/中下载的主题放到这里，然后在_config.yml文件中选择即可。

3. 选择并配置主题 Ocean

Ocean 是基于 Hexo 默认主题 landscape 的功能，设计的一款支持移动设备的主题，并且集成了 Gitalk 与 Valine 评论功能。 由于我是一枚 Designer 而不是 Coder，所以 欢迎指正！

来源: 数学家的博客
链接: https://zhwangart.github.io/2018/11/30/Ocean/

我选用了Ocean主题，中文教程也很详细，按照上面的流程走就可以了。过程中也遇到了一些小问题，查帮助解决了。

文章目录 toc

安装tocbot，在ocean/_config.yml开启。

https://github.com/zhwangart/gitalk/issues/7

fig.1 文章目录

文章插图

Hexo原始的插图方法是将所有图片都放在source/images/文件夹中，使用相对路径/images/myImage.png插入。这种方式很明显不利于后期整理、迁移。用图床也有一样的担心。于是我选择了hexo-asset-image 方法。

npm 安装

npm install hexo-asset-image --save

在hexo根目录下_config.yml文件中，修改配置文件

post_asset_folder: true

做了这个修改的效果是，
新建文章post时，会自动生成和文章名相同的文件夹。
这个文件夹存放当前文章所用图片的地方。

以 $ hexo new "wenzhang" 为例，结构如下：

wenzhang
├── picture1.jpg
├── picture2.jpg
└── picture3.jpg
wenzhang.md

文章中插入图片时，按照markdown的插入图片的语法来写，不需要加入任何路径，直接用图片名称。
e.g.
！[picture1](picture1.JPG)

来源: Yu‘s Note
链接: https://wangxiaoyu-go.github.io/2018/11/18/hexo-asset-image/

实际使用时，手动新建同名文件夹即可。不需要插图的文章，就不用多此一举了。

文章封面图

标准方法应该是页面前引入，将图片放在themes/ocean/source/images目录，也可以再新建一个CoverImage子文件夹专门存放。

title: article
date: 2020-05-30 20:00:00
photos: [
        ["/images/yourimage.jpg"], // themes/ocean/source/images目录下
        ["https://image_url.jpg"]] //在首页只会显示第一张，详情页会按顺序显示这两张

但是这样图片资源和文章是分割的，也很不方便。于是我采用了更简单的做法，直接在正文开头插入图片做封面图片，然后用<!--more>区分摘要部分和正文部分。效果是完全一样的。但是换其他主题不一定行。

首页文章折叠-阅读更多

在摘要和正文之间加入 <!--more--> 即可。题图也可以放在摘要中。

文章评论区

参考Gitalk 的使用，忽略“引入Gitalk”一节和“用法”一节的前半部分。由于Ocean主题都配置好了，只需要：

  1. 申请 GitHub Application
  2. 在 GitHub 中 创建一个仓库用来存放评论
  3. 在主题 config.yml 中添加配置参数，注意 repo 只需要写刚刚申请的仓库名称（不是链接地址）。

6. 其他参考

基于Hexo-Ocean主题博客搭建