建立博客

主题选择

首先优先选择Hexo是因为Node.js已经安装好了，比较方便

主题选择：Fluid

  • 主题需要简洁，因为博客定位是笔记记录整理

  • 需要有一定的美观（因为这个放弃了next主题）

  • 基本的页面：首页 归档 分类(支持多级分类) 、标签、搜索功能

开始使用

安装环境

  1. 安装Nodejs
  2. 安装脚手架npm install -g hexo-cli

初始化博客

1
2
3
4
5
6
7
8
9
hexo init blog   # 初始化博客
cd blog
npm instal


hexo new fistt # 创建第一个页面 填写内容

hexo g # 生成文件
hexo s # 启动  localhost:4000可以查看博客

部署到github

  1. 新建 用户名.github.io 的仓库

  2. 配置博客推送到对应仓库

    1
    2
    3
    4
    deploy:
      type:  git
      repo: [email protected]:Goinggoinggoing/Goinggoinggoing.github.io.git
      branch: main

  3. npm install hexo-deployer-git --save 安装git部署插件

  4. hexo d 推送到仓库

更换主题

  1. npm install --save hexo-theme-fluid

  2. 修改_config.yml

    1
    2
    theme: fluid  # 指定主题
    language: zh-CN  # 指定语言

  3. 重新生成并启动

    1
    2
    hexo g 
    hexo s

配置主题

​ 官方文档

文章配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 文章标题
tags: [Hexo, Fluid]
categories: [开发, 项目]
date: 2019-10-10 10:00:00

hide: true						 # 但可以通过链接访问
sticky: 100 					# 文章排序顺序 越大越前

index_img: /img/example.jpg 		# 封面图
banner_img: /img/post_banner.jpg  #	顶部图
---
以下是文章内容

图片展示

方法1：

  • 修改博客配置文件，post_asset_folder: true，使得每次生成文章时默认携带一个同名文件夹，用来存放图片
  • 引用图片： ![](test.png) 或 {% asset_img test.png 图片引用方法一 %}
  • 存在的问题：本地typora记笔记是记录到 name.asset/test.png，这样从本地到博客需要转换很麻烦

方法2：

​ 搭建github图床，每次本地完成后通过PicGo一键上传到图床，即可访问图片

image-20230402195401606

评论

配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)

快速上手 | Waline

数据库：t1 · LeanCloud

服务器：waline - Overview – Vercel

管理界面：https://comment.gogoes.buzz/ui

参考