hexo搭建个人博客

2023-12-28 13:01:46

部署个人博客

安装noejs和git

安装网站：

  • nodejs
  • git
    安装完后需要确认有无添加系统路径

安装部署Hexo

  1. 使用npm命令安装Hexo
    npm install -g hexo-cli
  2. 部署Hexo
    cmd到指定路径执行命令生成blog：hexo init <folder>
    cd <folder>
    npm install
    将blog部署到本地静态：hexo s
    命令添加博客：hexo n "文件名" 或hexo new "文件名"
  3. 美化主题
    可以自己寻找或者魔改
    hexo-theme-matery
    cd themes
    主题git下载地址或把主题下载好复制粘贴到themes文件夹中
    git clone https://github.com/blinkfox/hexo-theme-matery
    切换主题：修改Hexo根目录下的_config.yml文件中的theme值：theme:hexo-theme-matery
    • 新建分类categories页
      hexo new page "categories"
      编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容
      ---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
    • 新建标签 tags 页
      tags页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下
      hexo new page "tags"
      编辑你刚刚新建的页面文件/source/tags/index.md，至少需要以下内容
      ---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
    • 新建关于我 about 页
      about页是用来展示关于我和我的博客信息的页面，如果在你的博客 source目录下还没有about/index.md文件，那么你就需要新建一个，命令如下：
      hexo new page "about"
      编辑你刚刚新建的页面文件/source/about/index.md，至少需要以下内容：
      ---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
    • 新建友情连接 friends 页（可选的）
      friends页是用来展示友情连接信息的页面，如果在你的博客source目录下还没有friends/index.md文件，那么你就需要新建一个，命令如下：
      hexo new page "friends"
      编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：
      ---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
      同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
      [{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "ttps://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]
    • 代码高亮
      由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：
      npm i -S hexo-prism-plugin
      然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
      highlight:
    enable: false

prism_plugin:
    mode: 'preprocess'    # realtime/preprocess
    theme: 'tomorrow'
    line_number: false    # default false
    custom_css:
    • 搜索
      本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：npm install hexo-generator-search --save
      在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
      search:
    path: search.xml
    field: post
    • 文章字数统计插件
      如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件:npm i --save hexo-wordcount
      然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可
      wordCount:
    enable: false # 将这个值设置为 true 即可.
    postWordCount: true
    min2read: true
    totalCount: true

转载自blinkfox

部署博客可能出现的问题

  1. 解决图片路径问题
    安装 hexo-asset-image 插件
    npm install hexo-asset-image --save
    修改_config.yml文件:post_asset_folder: true
    当hexo new test创建时，会生成test目录和test.md网页，将图片放入test目录，test.md可正常解析。

  2. 解决部署到博客无法显示样式的问题
    主要原因是访问路径的原因
    还有使用https方法还是http方法
    解决方法：在_config.yml文件中找到url项

url:仓库路径 # https://gitee.com/navierstokes20/summary/
root: 仓库名(前后加斜杠) #/summary/

  1. 可在主题里的_config.yml里面修改主页配置，以及media文件夹中图片可以自我修改
  2. 如果出现页面加载不出来可能是开启某项功能后，缺少相应的插件，需要安装相应插件才能重新显示页面。
Unhandled rejection ReferenceError: D:\ok\themes\hexo-theme-matery\layout\post.ejs:26
24|
25| <% if (isTocEnable) { %>
26| <%- partial('_partial/post-detail-toc.ejs') %>
27| <% } else { %>
28| <%- partial('_partial/post-detail.ejs') %>
29| <% } %>
D:\ok\themes\hexo-theme-matery\layout_partial\post-detail-toc.ejs:90
88|
89|
90| <%- partial('_partial/post-detail.ejs') %>
91|
92|
93|
D:\ok\themes\hexo-theme-matery\layout_partial\post-detail.ejs:53
51|
52| <%- __('wordCount') %>:  ...

注释

  1. hexo blog文章路径: <folder>\source\_posts
  2. hexo clean //清除静态页面缓存（清除 public 文件夹)
  3. hexo g //在本地生成静态页面（生成 public 文件夹）
  4. hexo s //启动本地服务 http://localhost:4000，进行预览调试 -p 80 指定端口80
  5. hexo d //远程部署，同步到 GitHub
  6. npm install hexo-deployer-git --save //自动部署
  7. hexo clean && hexo g && hexo d //发布
  8. hexo markdown语法不支持{}链接跳转直接(#标题名)跳转

部署到gitee

1.在Gitee上创建新的仓库(注意: 仓库名称应该和用户名相同)
2.配置SSHKey,使用ssh key来解决本地和服务器的连接问题。

cd ~/.ssh #检查本机是否已存在的ssh密钥
ssh-keygen -t rsa -C "邮件地址" 生成ssh密钥

  连续3次回车，最终会生成一个文件在用户目录下。
  打开用户目录（C:\用户\你的用户名\），找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容。打开你的gitee主页，右上角头像那里选择设置 → SSH公钥，将刚复制的内容粘贴到公钥那里，标题随便填，填完点击确定。
  测试是否成功ssh -T git@gitee.com #注意，'T'是大写的

3.配置用户名和邮箱

git config --global user.name "xxx"  #你的 gitee 用户名，即注册时的用户名，个人主页最大那个就是了
git config --global user.email  "xxx@qq.com"  #填写你的github注册邮箱

4.配置_config.yml(全局配置)中的deploy部分

deploy:
  type: git
  repo: https://gitee.com/用户名/仓库名  #仓库的地址，比如我的就是：https://gitee.com/Kaiter-Plus/Kaiter-Plus
  branch: master

5.安装部署gitee插件

npm install hexo-deployer-git --save

6.部署giteehexo d

让博客在网上看到，需要 gitee 的 Gitee Pages 服务，操作步骤如下：

  • 打开gitee上的仓库，然后找到服务，然后再找到里面的Gitee Pages
  • 页面跳转之后，往下拉，选择部署的分支（默认为 master）,由于我们直接是部署在根目录的，所以部署分支直接默认，部署目录不用填，最后点击启动即可。
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
hexo s -g #生成并本地预览
hexo d -g #生成并上传
上一篇：ijcnn2022投稿准备


下一篇：Android应用-猜数字小游戏，android学习资料