使用技巧
Source
Edit
History

一个Hexo的原始教程

Catalogue
  1. 1. 本文以winddows系统安装hexo博客框架为例
    1. 1.1. 第一部分
    2. 1.2. 第二部分
    3. 1.3. 第三部分
    4. 1.4. 第四部分
    5. 1.5. 第五部分
  • The banner image of home page
    1. 1. 参考资料
    • 本文为网上的一篇较为完整且实用性较强的Hexo搭建教程，故收集之。

    本文以winddows系统安装hexo博客框架为例

    • 一、hexo本地安装

    • 二、提交到github仓库

    • 三、最轻便，最美主题安装，以及优质主题推荐

    • 四、在vercel容器安装hexo，添加自定义域名

    • 五、博客内容修改，修改菜单内容，页面内容，文章添加，插件安装，seo，cdn加速加载页面

    • 六、markdown 语法

    第一部分

    1、安装环境node.js

    安装时注意添加路径

    https://nodejs.org/en/

    2、安装git bash

    https://git-scm.com/download/win

    在 git bash 中输入以下命令启用 Hexo镜像

    1
    npm config set registry https://registry.npm.taobao.org

    在 git bash 中输入以下命令开始全局安装 Hexo

    1
    npm install -g hexo-cli

    在 git bash 中输入

    1
    hexo init 自定义博客名

    在 git bash 中输入hexo g ,编译静态文件到public文件夹，这是根目录会自动生成public文件夹

    1
    hexo g

    在 git bash 中输入hexo s，启动本地预览，关闭gitbash后,就无法预览

    1
    hexo s

    输入 http://localhost:4000 ，能正常访问，则启动成功

    第二部分

    3、将hexo代码提交到github仓库，

    注册github.com账号

    新建一个github仓库，仓库名必须是你的GitHub用户名.github.io，

    比如1jia1.github.io

    目的是为了搭载 GitHub Pages 服务，如果导入到vercel,可以自定义其它用户名

    3.1、生成SSH密钥

    在 git bash 中输入如下命令

    1
    2
    3
    4
    git config --global user.name "你的GitHub用户名"


    git config --global user.email "你注册github的邮箱"

    生成密匙命令

    1
    ssh-keygen -t rsa -C "你注册github的邮箱"

    在本地电脑中找到新生成的公匙，复制id_rsa.pub中的内容

    找到github个人图像

    设置-SSH and GPG keys-New SSH Key-粘贴公钥

    验证是否成功

    输入命令

    1
    2
    ssh -T git@github.com

    3.2打开 _config.yml，找到文件最后一行的 deploy

    替换以下代码

    1
    2
    3
    4
    5
    6
    deploy:

      type: git

      repo: https://github.com/你的github用户名/你的github用户名.github.io.git,main

    安装推送命令

    1
    npm install hexo-deployer-git --save

    清理缓存，重新生成静态文件，推送到github的命令

    1
    hexo clean && hexo g && hexo de

    推送成功后

    访问网址：你的GitHub用户名.github.io

    第三部分

    安装butterfly主题

    1
    https://butterfly.js.org/

    根目录下git bash 输入命令

    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

    安装渲染器

    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save

    修改 Hexo 根目錄下的 _config.yml，把主題改為 butterfly

    1
    theme: butterfly

    清理缓存，重新生成静态文件，推送到github的命令，每次更新完内容执行此命令

    1
    hexo clean && hexo g && hexo de

    访问网址预览效果：你的GitHub用户名.github.io

    第四部分

    在vercel容器安装hexo，添加自定义域名

    用github同名账号登录https://vercel.com/

    第五部分

    安装hexo admin 插件

    执行以下命令即可

    1
    2
    3
    4
    5
    npm install -g hexo
    cd ~/
    hexo init my-blog
    cd my-blog
    npm install
    1
    2
    3
    npm install –save hexo-admin
    hexo server -d
    open http://localhost:4000/admin/

    5.1菜单栏修改
    在 _config.yml 下找到 menu ：去掉前面的#就可以显示菜单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu:
       首页: / || fas fa-home
       归档: /archives/ || fas fa-archive
       标签: /tags/ || fas fa-tags
       分类: /categories/ || fas fa-folder-open
       #菜单||fas fa-list:
         #音乐: /music/ || fas fa-music
         #电影: /movies/ || fas fa-video
       友链: /link/ || fas fa-link
       #关于: /about/ || fas fa-heart

    5.2添加标签页

    根目录输入 hexo new page tags

    找到 source/tags/index.md 这个文件，修改这个文件：

    添加 type: “tags”

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 标签
    date: 2018-01-05 00:00:00
    type: "tags"
    orderby: random
    order: 1
    ---

    5.3添加子页面

    1
    2
    3
    hexo n  页面的名称

    创建你的页面就行

    5.4首页顶部图片更换

    The banner image of home page

    index_img: https://cdn.pixabay.com/photo/2023/10/23/03/03/fashion-8335213_1280.jpg

    著名的无版权可商用的图片网站
    https://pixabay.com/
    hexo主题分享
    1.连背景都是特效的博客

    preccrepad.github.io

    2.番茄博客，博文里面有很多小特效，比如会动的小标签啦，图片的加载动画啦

    tomotoes.com/blog/

    github.com/Tomotoes/he…

    3.一个UI设计师的博客，界面干净清爽

    esappear.github.io/clover/

    4.二次元爱好者转码人的博客，内容丰富，有点耗性能

    shoka.lostyu.me

    5.yilia升级版，简洁的博客，可以按主题和标签分类

    joeybling.github.io

    6.简单的博客框架，分类明晰，速度快，功能较少

    hufangyun.com

    7.暖色梵高主题，配色舒适

    www.nothinglin.ml/

    8.标签和UI特别可爱，图片选取很用心的一个博客

    rawchen.com/

    9.功能清晰，强大的主题matery，文章统计功能做得很细致

    blinkfox.com/

    10.hexo-theme-redefine

    11.butterfly

    参考资料