首页 > 其他分享> 文章详细

hexo搭建个人博客

2021-03-28 20:57:50 阅读：197 来源： 互联网

标签：hexo Hexo com 博客 gitee 搭建 config 页面

部署个人博客

安装noejs和git

安装网站：

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

安装部署Hexo

使用npm命令安装Hexo
npm install -g hexo-cli
部署Hexo
cmd到指定路径执行命令生成blog：hexo init <folder>
cd <folder>
npm install
将blog部署到本地静态：hexo s
命令添加博客：hexo n "文件名" 或hexo new "文件名"
美化主题
可以自己寻找或者魔改
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

部署博客可能出现的问题

解决图片路径问题
安装 hexo-asset-image 插件
npm install hexo-asset-image --save
修改_config.yml文件:post_asset_folder: true
当hexo new test创建时，会生成test目录和test.md网页，将图片放入test目录，test.md可正常解析。
解决部署到博客无法显示样式的问题
主要原因是访问路径的原因
还有使用https方法还是http方法
解决方法：在_config.yml文件中找到url项

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

可在主题里的_config.yml里面修改主页配置，以及media文件夹中图片可以自我修改
如果出现页面加载不出来可能是开启某项功能后，缺少相应的插件，需要安装相应插件才能重新显示页面。

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') %>:  ...

注释

hexo blog文章路径: <folder>\source\_posts
hexo clean //清除静态页面缓存（清除 public 文件夹)
hexo g //在本地生成静态页面（生成 public 文件夹）
hexo s //启动本地服务 http://localhost:4000，进行预览调试 -p 80 指定端口80
hexo d //远程部署，同步到 GitHub
npm install hexo-deployer-git --save //自动部署
hexo clean && hexo g && hexo d //发布
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 #生成并上传

标签：hexo,Hexo,com,博客,gitee,搭建,config,页面
来源： https://blog.csdn.net/weixin_49159287/article/details/115287305

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。