Hello Hexo+GIthub搭建博客服务器

kevin Lv2
  2023-07-09 08:44:42 2023-07-09 08:44 创建   2023-07-14 18:42:15 2023-07-14 18:42 更新    2k 字  8 分钟  

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

以下是一些可供选择的主题

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
36
37
38
39
40
41
hexo-theme-bamboo
hexo-theme-zhaoo
hexo-theme-keep
hexo-theme-matery
hexo-theme-stun
hexo-theme-apolloZ
hexo-theme-raytaylorism
hexo-theme-spfk
hexo-theme-ochuunn
cactus-dark
cactus-white-cn
hexo-theme-yilia
hexo-theme-even
hexo-theme-random
hexo-theme-volantis
hexo-theme-Cards
Hexo-Theme-Life
hexo-theme-Anisina
hexo-theme-pure
hexo-theme-typing
hexo-theme-pln
hexo-theme-landscape
fexo
hexo-theme-indigo
hexo-theme-Anatole
maupassant-hexo
hexo-theme-mdui
hexo-theme-next
hexo-theme-material
hexo-theme-hueman
hexo-theme-magnetic
hexo-theme-snippet
hexo-theme-casper
hexo-theme-adagio
hexo-theme-fluid
hexo-theme-freemind.bithack
hexo-theme-yun
hexo-theme-arknights
Kratos-Rebirth
hexo-theme-melody
Hexo-Theme-MengD

更新主题配置

  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
5
title: java
date: 2021-07-13 08:44:42
categories: java
tags: 
	- java

博客的语言环境设置

设置中文

hello-blog下的_config.yml文件中

language: zh-CN

图片显示问题

  1. 安装插件 -

    1
    npm install hexo-asset-img --save

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

1
2
3
4
5
6
7
#修改post_asset_folder
post_asset_folder: true
#添加或者重新以下内容
marked:
     prependRoot: true
     postAsset: true

  1. hexo n mysql

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

想要Typora和博客上均能显示图片,必须以以下格式: 两个都试试

1
2
3
4
5
6
7
8
9
10
11
#macOS
![](mysql/mysql.png)
         
#win
![](./mysql/mysql.png)

Bug: 图片设置缩放后,插件失效.

原因:md文件中的图片 变成了<img src="mysql/mysql.peng" ..../>

4. hexo s

内置搜索的功能

1
2
3
4
5
6
7
8
9
10
11
#主题配置文件中
local_search:
  enable: true
  
#站点配置文件中
search:
	path: search.xml
	field: post
	format: html
	limit: 10000

安装内置搜索插件

npm install hexo-generator-searchdb –save

评论

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

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
11
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
  serverURLs: https://appID前八位.api.lncldglobal.com

#字数统计&阅读时长

  1. npm i -S hexo-wordcount

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

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

也可以使用 busuanzi,具体自己csdn

附件-优秀插件

  1. 显示图片

    1
    npm install hexo-asset-img --save

  2. 内置搜索

    1
    npm install hexo-generator-searchdb --save

  3. 字数统计&阅读时长

    1
    2
    npm i -S hexo-wordcount

  1. github部署

    1
    npm install hexo-deployer-git --save

配置host访问github

  1. 按照路径C:/Windows/System32/etc/HOSTS，找到HOSTS文件 （System32可能会直接看不到etc文件夹，可以在右上角搜索etc文件夹再双击打开

  2. 站长工具: https://ping.chinaz.com/github.com ping一下github

    选择一个延迟低的站点: 例如 20.248.137.48

    a .在终端中 执行

    1
    ping 20.248.137.48

    b.如果能够ping 通就在host文件中添加

    1
    20.248.137.48 github.com

    c.释放ip

    1
    ipconfig/release

    d. 尝试ping github.com

    1
    ping github.com

    a步骤超时的话换一个节点继续重复abcd.

    至此就可以访问github,如果有魔法就不用这么弄了.

部署github

首先要安装了git,并且注册了Github.

在本地终端执行

1
2
3
git config --global user.name "github用户名" 

git config --global user.email "github邮箱"

新建的仓库

名称必须是Github用户名.github.io

需要添加README.md

安装github部署插件

在hexo-log目录下执行以下命令

1
npm install hexo-deployer-git --save

获取一个“Tokens”

在Github找的 Settings –> 左边栏最下方Developer settings —> 左边栏Personal access tokens 中选择Tokens(classic)

新建一个token: 选择Generate new token 选择第二个

note 任意填写, 勾选repo 然后直接创建

完成后复制创建出来的key

hello-blog/_config.yml文件

1
2
3
4
deploy:
  	type: git
  	repo: https://key@github.com/Github用户名/Github用户名.github.io.git
  	branch: mian

hexo三连操作

1
hexo cl && hexo g && hexo d

浏览器输入 - Github用户名.github.io

  • 标题: Hello Hexo+GIthub搭建博客服务器
  • 作者: kevin
  • 创建于: 2023-07-09 08:44:42
  • 更新于: 2023-07-14 18:42:15
  • 链接: https://lsmallice.github.io/posts/50238e86.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
推荐阅读
hexo博客部署云服务器 hexo博客部署云服务器 Hello World Hello World mysql的安装和配置 mysql的安装和配置
推荐阅读
hexo博客部署云服务器 hexo博客部署云服务器 Hello World Hello World
 评论
此页目录
Hello Hexo+GIthub搭建博客服务器
  1. hexo+github搭建博客服务器
  2. 安装nodejs
    1. 环境变量的配置
    2. 简单认识npm
    3. npm简单使用
      1. 修改镜像
    4. 简单使用 - 不需要操作
  3. Hexo官网
    1. 安装
    2. 创建真正的博客目录
    3. 测试 - 启动博客服务器
    4. 常用主题模板
    5. 注册码云账号
    6. 安装模板
  4. 更新主题配置
  5. 个人信息
  6. Markdown语法
  7. 新建博文
  8. 主题的侧边栏
  9. 文章的分类和标签
  10. 博客的语言环境设置
  11. 图片显示问题
  12. 内置搜索的功能
  13. 评论
  14. 附件-优秀插件
  15. 配置host访问github
  16. 部署github