^-^
本站同款博客搭建
  1. 前置条件
  2. 第一步: 安装 hexo 框架并生成博客
  3. 第二步：配置 A4 主题
  4. 第三步：关联 github

前置条件

  • 具有 Web 前端初级技能水平
  • 已配置好的 Node 环境
  • 已拥有 Github 账号,并熟悉 GIT 操作
  • 熟悉 Markdown 文档语法

第一步: 安装 hexo 框架并生成博客

  • 使用 npm 安装 hexo 框架： npm install hexo-cli -g

  • 到文件目录下使用 hexo 初始化博客：hexo init 你的博客文件名

  • 进入生成好的博客：cd 你的博客文件名

  • 安装博客依赖：npm install

  • 确认博客是否可以运行：hexo server （博客默认运行在本地 4000 端口）

  • 恭喜~到这一步，博客已成功运行

  • 如需深入了解 hexo 框架,请点击这里

第二步：配置 A4 主题

  • 在博客根目录下安装主题：npm install hexo-theme-a4@latest

  • 在博客根目录创建_config.a4.yml 文件,将以下内容复制进入文件（对主题的所有个性化配置都将在_config.a4.yml 文件中进行，可按照文件中的注释自行配置）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    # ‘首页’ 和 ‘文章’ 较为 特殊
    # 目前如果你想修改 ‘文章’ 为 其他别名，记得去_config.yml中把，menu和showInMenu中的 '文章' 都也同步修改，或者注释掉，否则会产生影响
    menu:
      首页: / #需要hexo new page index,在index/index.md填写的内容将会展现在首页上
      文章: /list/ # 需要hexo new page list
      # 添加其他页面格式举例：
      # 关于: /about/ # 需要hexo new page about
      # 标签: /tags/ #需要hexo new page tags
      # 分类: /categories/ # 需要hexo new page categories
      # ...

    # 首页你想要展示的menu链接，注意当你修改了menu中的别名，这里要随着更改，不然你会疑惑怎么首页没有修改后的别名
    showInMenu: # menu 中的哪些页面显示在首页中（“首页”必定显示）
      - 文章 # 将在首页显示 文章 链接
      # - 关于
      # - 标签
      # - 分类

    # 因为 最终 页面的生成 会取 _config.a4.yml 和 _config.yml 的并集
    # 所以当你复制了一份该配置文件为 _config.a4.yml后，强烈建议你将 _config.yml 中的 menu,showInMenu中的配置都 注释掉
    # 甚至可以注释掉 _config.yml中所有的配置，这样最终只会基于你的 _config.a4.yml

    index: # 首页相关配置
      header:# 首页的页眉 以及 404页面，当你没开启一言，将会每次刷新页面随机展示下面的语句
        #- "我忘明月很久，明月始终望我"
        #- "人山人海，人来人往"
        #- "看过大海的人不会忘记海的广阔"
        # ...
      hitokoto: false # 一言：调用网络语句展示的接口
      footer: Email:[email protected] # 除了可以填写任何文字外，可以自动邮箱链接化，但需按照这个格式填写：Email:[email protected]
      titlePosition: left # center | left  # 首页标题的位置

    footerLink: # 底部的链接自定义
      info: © 1949-2024 China # info这个单词不能修改，不想使用可为空
      # 添加链接格式 举例
      # 友链: /friends/ # 需要hexo new page friends
      # 联系: /contact/ # 需要hexo new page contact
      # 支持: /support/ # 需要hexo new page support
      # ...

    post: #除首页之外页面
      footer: 🌊看过大海的人不会忘记海的广阔🌊 # 底部左侧 自定义信息
      themeInfo: true # true | false  # 是否开启 底部右侧 声明本站信息
      endContent: 以上 # 当你使用了 评论功能，此配置才会生效

    # 相对于source目录下的头像url
    favicon: /img/favicon.webp

    # 是否启用一些特色工具 false | true
    tool:
      darkMode: true # 暗黑模式
      returnToTop: true # 回到顶部按钮
      returnToLast: true # 回退页面按钮
      topToc: true # 文章顶部目录
      leftToc: true # 文章左侧目录 目前仅支持大屏幕浮现

    # ---------------------------------------------------------------------------------------
    # 以上为基本配置，实现了A4主题追求的纯净风
    #
    # 以下为 非必要不必更改的配置
    #
    # ps：还有经过A4作者测试，可供你使用的插件，详见：https://ninojay.top/tags/hexoPlugin/
    # ---------------------------------------------------------------------------------------

    # 你可能会用到的 https://ninojay.top/2023/website-cdn/
    cdn:
      enable: false # 如果你修改了 css/js ，也许需要把cdn设置为false才会生效
      choose: jsdelivr # aliyun | unpkg| jsdelivr  # 都调整为利于国内的cdn，建议使用默认的 jsdelivr 即可
      # 因为是免费CDN，所以有挂的风险，一旦发现网站样式出现原来没有的问题，请尝试关闭CDN

    # 实验性功能：A4色调调整：颜色搭配是很主观的行为
    # 设置为 false 为 A4 默认灰白色调，可设置为 true 直接启动 体验下 另一种护眼预置色调
    # 注：颜色代码需加“#”，颜色单词不需要加“#”
    # 更多A4色调搭配推荐：https://ninojay.top/hexoplugin/A4-color-change/
    color:
      enable: false # true | false
      font: "#9e5345" # 字体颜色
      background: "#e8e0c9" # 最底部层背景颜色
      indexBackGround: "#efeae2" # 首页层颜色
      postBackGround: "#efeae2" # 文章页层颜色
      codeBackGround: "#e8e0c9" # 代码块背景颜色
      codeFont: "#2e5041" # 代码块字体颜色
      linkBeforeClick: "#2e5041" # 链接点击前的颜色
      linkAfterClick: "#9c9caf" # 链接点击后的颜色

    # A4背景引入图片
    # 图片你应该先放到 source下，下面选项的图片路径 即为 相对于 source 目录的路径
    imageShow:
      enable: false
      background: /img/favicon.webp # 最底部层背景

    # A4默认中文使用霞鹜文楷，如果你想关闭这种字体，首先保证enable为 true 接着可以开关对应字体
    font:
      enable: false # 是否使用字体开关功能
      LXGWWenKai: true # 霞鹜文楷 如果关闭，中文则使用的是 思源宋体，思源宋体不提供关闭

    # ---------------------------------------------------------------------------------------
    # Comment plugin
    # 评论插件：需要根据教程自行部署评论服务
    # ---------------------------------------------------------------------------------------
    comment:
      enable: false
      use: waline # values: waline、twikoo、artalk

      # Waline
      # See: https://waline.js.org/guide/get-started.html
      waline:
        serverUrl: # Waline server url(vercel) example: https://example.example.com
        lang: zh-CN # Waline language, default: zh-CN. See: https://waline.js.org/guide/client/i18n.html
        placeholder: 留下你的评论吧。 # 评论框背景信息

      # Twikoo
      # See: https://twikoo.js.org/quick-start.html
      twikoo:
        envId: # 腾讯云环境填 envId；其它环境填地址
        region: # 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；其它环境不填
        lang: # 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js

      # Artalk
      # See: https://artalk.js.org/guide/deploy.html
      artalk:
        server: # Artalk 后端地址

    inject:
      css: css/custom.css

    version: v1.8.9

  • 在博客根目录选中_config.yml 将主题切换为 A4(全局搜索 theme 字段，将 a4 填入 theme 后)

  • 恭喜~到这一步，主题已经成功安装

  • 请点击这里深入了解 A4 主题以及博客内容的编写

第三步：关联 github

  • 在 github 中创建以自己 账户名称.github.io 为文件名的项目，并将权限设为开放 Public
  • 在博客根目录选中_config.yml 配置 deploy(全局搜索 deploy 字段,将以下内容修改为对应数据)
    1
    2
    3
    4
    5
    6
    7
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git # 推送源头
      repo: https://github.com/github账户名称/github账户名称.github.io.git # 推送地址
      branch: main # 推送分支
      message: update # 推送成功后的提示信息
  • 在博客根目录运行 hexo clean 清理生成的资源
  • 在博客根目录运行 hexo generate 生成的资源
  • 在博客根目录运行 hexo deploy 推送资源到 gihub（请确保本地已有 github 凭据）
  • 等待 5 分钟，访问 https://github.com/github账户名称/github账户名称.github.io.git 即可
  • 恭喜~到这一步，已成功部署到 github
  • 如需深入了解推送相关,请点击这里
2023-09-08 该篇文章被 Andrew 打上标签: 教程 博客 归为分类: 教程

© 2023-2024
永远相信美好的事情即将发生 本站由Hexo驱动｜使用Hexo-theme-A4主题