why-hexo

本文最后更新于 2024年6月1日下午

为什么选择 Hexo

搭建个人博客 🤔

市面上主流的一些博客网站广告繁杂，一些交互逻辑不太合理，自定义程度不高。根本动机：搭建独属于自己的知识库。

如何实现？现在市面上主要有两个模式：

有后端：WordPress（类似于学生管理系统，在后端写文章，在前端渲染）
无后端：纯静态页面渲染（纯 html 渲染）：Hexo、VuePress、Gatsby

无后端的逻辑：在本地编写 markdown 文件，然后本地手动编译为 html 文件，最后打包上传进行部署即可进行渲染与共享。

本地环境最低配：

git: git add . git commit -m '...' git push
nodejs、npm: 上 nodejs 官网下载 LTS

Hexo 1⃣

纯小白入手最佳实践

VuePress 2⃣

基于 vue 生态

<template>
  <main class="page">
    <slot name="top" />
      <div class="content">
          <div style="width:100%">
              <Content class="theme-default-content custom-content"  />
              <PageEdit style="margin: 0"/>
              <PageNav v-bind="{ sidebarItems }" />
          </div>

          <div class="toc-container-sidebar" ref="tocc">
              <div class="pos-box">
                  <div class="icon-arrow"></div>
                  <div class="scroll-box" style="max-height:86vh">
                      <div style="font-weight:bold;">{{pageSidebarItems[0].title}}</div>
                      <hr/>
                      <div class="toc-box">
                          <PageSidebarToc :depth="0" :items="pageSidebarItems" :sidebarDepth="6"/>
                      </div>
                  </div>
              </div>
          </div>
      </div>

    <slot name="bottom" />
  </main>
</template>

Gatsby 3⃣

基于 React 生态

import React from 'react'
import { graphql } from 'gatsby'
export default function Home({ data }) {
  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
      <p>{data.site.siteMetadata.description}</p>
    </div>
  )
}
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`