Hexo和Gitee(码云)搭建个人博客记录

---

Hexo和Gitee(码云)搭建个人博客记录

Hexo简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装 Hexo前需要提前安装：

• Node.js
• git
  基于B站

1、安装Hexo

新建文件夹，比如我这里建立 “hexo_blog”

打开cmd终端或者使用Git Bash Here命令界面，输入命令安装：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gR0bu875-1584349702497)(hello-world/image-20200316152342819.png)]

1.1 设置cnpm

• 先设置npm的镜像源为淘宝源，提高下载速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2 初始化博客

• 安装hexo

$ cnpm install -g hexo-cli
$ hexo -v
$ hexo init

• init完成后，执行npm install 命令

  npm install
  

• 执行hexo server命令运行服务，浏览器输入 http://localhost:4000访问

  $hexo server
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oppXck56-1584349702497)(hello-world/image-20200316154956833.png)]

1.3 安装hexo 成功

• 这时候代表本地的hexo博客安装成功了。

1.4 新建博客文章

$hexo new "第一篇博客" 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lwo6RYn9-1584349702498)(hello-world/image-20200316155431906.png)]

​ 创建好的博客文件目录D:\hexo_blog\source_posts

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eah8Vrtj-1584349702498)(hello-world/image-20200316162959786.png)]

• hexo g 命令生成网页文件，文件存放在public目录

  $hexo g
  

• hexo s 命令 启动本地博客服务，在浏览器中输入localhost:4000/ 查看

  $hexo s
  

1.5运行测试

$hexo clean  #用来清理缓存文件
$hexo  g     #生成文件
$hexo  s     #运行本地服务器
$hexo  d     #上传到服务器

2.使用icarus 主题

官方主题：https://hexo.io/themes/

• 方法1：下载icarus主题到本地

$git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

• 方法2：主题地址：https://github.com/ppoffice/hexo-theme-icarus

  下载主题解压到根目录hexo-bolg\themes文件夹下，文件夹名简写icarus

• 在站点配置文件（D:\hexo_blog\themes）_config.yml中将主题改为icarus

  # Site
  title: Hexo
  subtitle: ''
  description: ''
  keywords:
  author: John Doe
  language: zh-CN   #语言改为中文
  timezone: ''
  

• 在icarus主题的配置文件（D:\hexo_blog\themes\icarus）_config.yml中设置博客头像、昵称、签名、菜单栏改为中文、开启缩略图、分享插件等信息，并可以去掉部分不需要的链接信息，部分配置如下：

  # Navigation bar link settings
  navbar:
      # Navigation bar menu links
      menu:
          主页: /
          归档: /archives
          分类: /categories
          标签: /tags
          关于: /about
  

  注意：_config.xml两个配置文件一个在项目根目录下，一个在主题文件根目录下。

• ​ 到此 ，本地hexo博客已经搭建完成，下一步博客部署到Gitee

3、本地博客部署到Gitee

3.1新建仓库

gitee网址：https://gitee.com/

在gitee上注册账号并新建个人博客仓库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LnSj5HiQ-1584349702498)(hello-world/image-20200316164554516.png)]

• 安装hexo git部署工具

$ npm install hexo-deployer-git --save

• 在_config.xml配置hexo部署仓库

  # Deployment
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
    type: git
    repo: https://gitee.com/lei929/lei929.git
    branch: master
  

• 执行hexo d命令将博客上传至仓库，首次上传会让填写gitee 账号和密码

• 开启gitee pages服务

• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZAAbMyy7-1584349702498)(hello-world/image-20200316165003211.png)]

• 开启后使用提供的网址即可访问博客，每次重新上传代码到gitee时都需要点击下图的更新按钮重启page服务

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GyQtldKv-1584349702499)(hello-world/image-20200316165120498.png)]

• 在站点配置文件_config.xml设置博客地址，使生成的博客资源可以正常访问

  # URL
  ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  url: https://lei929.gitee.io
  root: /
  

• 执行hexo clean && hexo g && hexo d重新上传博客资源，点击更新后访问博客

3.2添加图片插件

• 在_config.yml配置文件中，修改为 post_asset_folder: true
• 安装图片插件
• 新建一篇文章，会生成

npm install hexo-asset-image --save

4、FAQ

4.1、Hexo init 初始化超时443

博客资源，点击更新后访问博客

3.2添加图片插件

• 在_config.yml配置文件中，修改为 post_asset_folder: true
• 安装图片插件
• 新建一篇文章，会生成

npm install hexo-asset-image --save

4、FAQ

4.1、Hexo init 初始化超时443

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z2hhv3jn-1584349702499)(hello-world/image-20200316153302253.png)]