hexo个人博客的搭建
任胜 Lv2
  2023-07-11 21:37:37 2023-07-11 21:37   2023-07-12 09:10:04    1.6k 字  6 分钟  

hexo+github搭建博客服务器

  1. csdn,简书,有道笔记 - 广告比较多
  2. hexo+github[比较慢,翻墙]/gitee[Git pages服务器 - 维护]/阿里云服务器

安装nodejs

  1. 非中文的非特殊字符的目录中[目录中不要出现空格或者带有特殊符号的]
  2. D:/node-v14.17.3-win-x64

环境变量的配置

  1. 桌面计算机 - 右击 - 属性 - 高级系统设置 - 环境变量(N)

  2. 定位到下方的系统变量

  3. 定位到变量名 - Path - 编辑 - 新建

  4. D:/node-v14.17.3-win-x64

  5. 一定要关闭所有的环境变量配置的窗口 - 确定

  6. 打开终端[如果终端已经打开了,关闭 - 重新打开]

    win[微软图标]+r - 输入cmd - 输入如下指令检测nodejs是否配置成功

    1
    2
    3
    4
    5
    npm -v
    6.14.5 出现版本号,则说明配置成功
       
    如果出现了不是内部或者外部的命令的同学,请检查自己的nodejs解压缩之后的路径是否
    成功配置到了path中

简单认识npm

npm是javascript的一个**包[前端框架]**管理工具,并且是nodejs平台默认的包管理工具.

通过npm可以安装,共享,分发代码,管理项目依赖关系.

类似于java中的maven或者gradle[强大的项目构建工具以及项目依赖管理工具]

npm简单使用

修改镜像

为了下载速度变快,修改npm的镜像

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

验证一下,镜像是否成功修改了

1
2
3
npm config get registry

https://registry.npm.taobao.org/

简单使用 - 不需要操作

  1. 下载bootstrap

    npm install 框架名称 - 默认下载的是最新的版本

    1
    npm install bootstrap@3

Hexo官网

https://hexo.io/zh-cn/docs/

安装

  1. 假设你在D盘根目录下新建了一个文件夹hello-hexo[博客项目的根目录]

  2. win+r - 打开终端

  3. 通过dos命令进入到hello-hexo目录中

    1
    2
    3
    C:/User/admin>d:
    D:>cd hello-hexo
    D:/hello-hexo>npm install hexo-cli -g

创建真正的博客目录

1
D:/hello-hexo>hexo init hello-blog
1
2
cd hello-blog
D:/hello-hexo/hello-blog>npm install

测试 - 启动博客服务器

1
D:/hello-hexo/hello-blog>hexo s

关闭服务器

1
ctrl+c

打开浏览器输入:localhost:4000

常用主题模板

https://blog.csdn.net/zgd826237710/article/details/99671027

使用git命令来进行克隆,需要提前安装好git,检测git是否安装成功,重新打开终端

1
git --version

注册码云账号

推荐用QQ注册一下

本地配置码云账号信息 - 配置文件 - 位置windows的用户主目录下

C:/User/计算机用户名 - 观察是否存在**.gitconfig**文件,添加如下内容

1
2
3
[user]
	email = 码云的QQ邮箱
	name = 用户名

安装模板

通过cmd进入到hello-blog目录中的themes目录中

1
2
D:/hello-hexo/hello-blog>cd themes
D://hello-hexo/hello-blog/themes>git clone https://gitee.com/guancg/hexo-theme-pure.git

或者直接从github上直接clone

1
git clone https://github.com/cofess/hexo-theme-pure.git

更新主题配置

  1. 指定新的主题

    hello-blog目录下的_config.yml文件

    1
    theme: hexo-theme-pure
  1. 重启服务器hexo s

个人信息

hexo-theme-pure/_config.yml文件

1
2
3
4
5
overriden
  author: 任胜
  author_title: 高级打字员
  author_description: 个人简介。
  location: SuZhou, China

Markdown语法

语法的编辑器 - https://typora.io/

文件的后缀是md

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
常用语法如下:

1. 标题的语法:
1~6标题 - # 一级标题    ## 二级标题   

2. 代码块 - java,js,mysql...

​~~~java 敲enter键

3. 列表
3-1. 无序列表
     * 列表名称

     有序列表
     1. 列表名称

4. 高亮显示
   `高亮显示内容`

5. 加粗字体
   **粗体**

6. 斜体
   *斜体*

7. 粗+斜
   ***粗斜***

8. 段落
   > 空格

9. 引入外部图片
   ![](xx.png)

10. 表格

新建博文

1
D://hello-hexo/hello-blog>hexo n java

效果:hello-blog目录下的source/_ports/自动生成一个java.md文件

重启blog服务器

1
D://hello-hexo/hello-blog>hexo s

主题的侧边栏

侧边栏的链接生效

将/hello-blog/themes/hexo-theme-pure/_source/下的除了_data文件夹,其余文件夹

拷贝一份放入到hello-blog目录下的source目录中即可

文章的分类和标签

只需要在文章的.md文件的自动生成的头部添加

1
2
3
4
title: java
date: 2021-07-13 08:44:42
categories: java
tags: java

博客的语言环境设置

设置中文

hello-blog下的_config.yml文件中

language: zh-CN

图片显示问题

  1. 安装插件 - npm install https://gitee.com/guancg/hexo-asset-image.git –save

  2. 需要到hello-blog/_config.yml文件中进行配置

    1
    post_asset_folder: true

  3. hexo n 机器学习

    效果就是除了生成了机器学习.md还有一个机器学习文件夹,那么这篇文章的所有的图片就可以存储在机器学习文件夹中

  4. hexo s

内置搜索的功能

1
2
3
4
# Search
search:
insight: true # you need to install `hexo-generator-json-content` before using Insight Search
baidu: false # you need to disable other search engines to use Baidu search

安装内置搜索插件

npm i -S hexo-generator-json-content

评论

不需要本地数据库进行存储的,用的是第三方的.

LeanCloud - 官网地址 - https://www.leancloud.cn/

注册 - 登录 - 控制台 - 创建应用 - 右下设置 - 应用凭证

appId - sljUq97vUAdLAo7XQdf13aFR-gzGzoHsz

appKey - 3hn4ijEgSzJeRV4nkmXThmGV

在hexo-theme-pure\_config.yml文件中配置

1
2
3
4
5
6
7
8
9
10
valine: # Valine. https://valine.js.org
 appid: sljUq97vUAdLAo7XQdf13aFR-gzGzoHsz  # your leancloud application appid
 appkey: 3hn4ijEgSzJeRV4nkmXThmGV# your leancloud application appkey
 notify: false # mail notifier , https://github.com/xCss/Valine/wiki
 verify: false # Verification code
 placeholder: Just go go # comment box placeholder
 avatar: mm # gravatar style
 meta: nick,mail,link # custom comment header
 pageSize: 10 # pagination size
 visitor: true # Article reading statistic https://valine.js.org/visitor.html

#字数统计&阅读时长

  1. npm i -S hexo-wordcount

  2. hexo-theme-pure_config.yml文件中配置

    1
    2
    3
    4
    postCount:
      enable: true
      wordcount: true  # 文章字数统计
      min2read: true  # 阅读时长预计

附件-优秀插件

  1. 显示图片

    1
    npm install https://gitee.com/guancg/hexo-asset-image.git --save

  2. 内置搜索

    1
    npm i -S hexo-generator-json-content

  3. 字数统计&阅读时长

    1
    npm i -S hexo-wordcount

  1. github部署

    1
    npm install hexo-deployer-git --save

部署github

git config –global user.name “github用户名”

git config –global user.email “github邮箱”

github.com

chrome浏览器 + iguge - https://iguge.app/

新建的仓库的名称必须是guancgsuccess.github.io

仓库地址 - https://github.com/Rs-zt/Rs-zt.github.io.git

安装github部署插件

npm install hexo-deployer-git –save

hello-blog/_config.yml文件

1
2
3
4
deploy:
type: 'git'
repo: 'https://github.com/Rs-zt/Rs-zt.github.io.git'
branch: 'master'

hexo三连操作

1
2
3
4
hexo cl
hexo g
hexo s
hexo d

浏览器输入 - Rs-zt.github.io

  • 本文标题：hexo个人博客的搭建
  • 本文作者：任胜
  • 创建时间：2023-07-11 21:37:37
  • 本文链接：2023/07/11/hexo个人博客的搭建/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论
  1. 1. hexo+github搭建博客服务器
  2. 2. 安装nodejs
    1. 2.1. 环境变量的配置
    2. 2.2. 简单认识npm
    3. 2.3. npm简单使用
      1. 2.3.1. 修改镜像
    4. 2.4. 简单使用 - 不需要操作
  3. 3. Hexo官网
    1. 3.1. 安装
    2. 3.2. 创建真正的博客目录
    3. 3.3. 测试 - 启动博客服务器
    4. 3.4. 常用主题模板
    5. 3.5. 注册码云账号
    6. 3.6. 安装模板
  4. 4. 更新主题配置
  5. 5. 个人信息
  6. 6. Markdown语法
  7. 7. 新建博文
  8. 8. 主题的侧边栏
  9. 9. 文章的分类和标签
  10. 10. 博客的语言环境设置
  11. 11. 图片显示问题
  12. 12. 内置搜索的功能
  13. 13. 评论
  14. 14. 附件-优秀插件
  15. 15. 部署github