hexo搭建个人博客

部署个人博客

安装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学习资料