V2AS问路
hexo+gitee(码云)搭建个人博客避开所有坑
阅读原文时间：2021年04月20日阅读：1

文章目录

一.简介

  • 为什么要搭建博客，因为某天突然看到好多大神级别的人物在发自己搭建的博客，效果特别的好，作为小白的我看了之后，蠢蠢欲动，于是乎一下走上了不归的试坑道路

  • 搭建个人博客，一方面可以记录我们生活的方方面面，按照自己的需求设计自己的模块，可以说是私人订制了，另一方面就是给别人提供了一种了解你自己的渠道，可以说是自己的一个名片，因为我们需要的是让更多的人认识我们，而不是我们认识更多的人

在此请允许我秀一下成功后的喜悦，我的博客

二.为什么使用hexo+码云搭建

  1. 我感觉搭建博客最简单的方法就是，在一个服务器上面去搭建，比如说阿里云，腾讯云等等，我们只需要在服务器的文件系统上传压缩包并解压，用测试域名就可以看到效果了，但是现在服务器都是收费的，从理想的角度来考虑，当然要选择一个可以长期使用而且不收费的服务器

  2. 所有我们选择码云，因为码云上有gitee pages(免费的静态网页托管服务)，目前码云支持Jekyll、Hugo、Hexo编译静态资源，不知道什么是Jekyll、Hugo、Hexo 可以打开链接看看

  3. 选择hexo的原因是，hexo基于Node.js实现的，而且目前主流的vue前端一般都是使用npm或者yarn来跑项目，因此使用hexo搭建博客比较简单

三.hexo 本地博客搭建

这里我以windows系统为例，因为我条件限制，希望理解

1. 准备

这里我们需要下载安装两个软件，我们就去官网下载一下node.js和 git，如何git 下载比较慢的话，在下面说码云使用教程模块，也有下载链接

2.Node.js 的安装配置

我们下载完 node.js 进行安装就可以了。

关于配置可以参考这两篇文章

  1. node.js的安装
  2. node.js的环境配置

3.hexo 的安装

//接下来我们安装hexo，打开git 命令行，执行如下命令
$ npm install hexo-cli -g

注意：输入hexo 按回车，出现下面help 就说明安装成功

4.初始化项目文件

在准备放项目文件的目录，可以通过windows的cmd终端或者git bash 执行如下的命令

hexo init blog   //注意：blog为项目的文件夹名可自定义

执行命令就会开始下载文件

下载成功之后的目录是这样的

5.本地测试项目

输入常用的hexo 命令进行本地的测试

hexo clean //清空已经存在的hexo网站文件
hexo generate(可简写g) //依据网页文件和新的css样式生成新的网站文件
hexo server(可简写为s) //启动本地服务器，可以在localhost：4000查看网站修改效果

我们先 输入 hexo g 生成网站文件

然后再启动本地服务器，我在在浏览器输入 http://localhost:4000 就能看到样式内容了


到这里本地测试就结束了，关键我们要放在服务器上面，本地测试适用于我们，一边修改代码，一边刷新网页查看修改好的样子

四.主题模块

  1. 一般默认安装的主题是一个 landscape 主题，但是我感觉不是很花哨，而且hexo的主题特别多，都挺漂亮的，我们可以选择更改

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

  2. 给大家推荐一个主题 sakura，我搭建的主题就是这个，效果还是挺不错的,sakura下载链接

  3. 下载之后，我们将hexo-theme-sakura-master中的主题样式复制到 根目录下的 theme 目录下

  4. 修改更目录下的配置文件 _config.yml

注意
theme： sakura //此处的主题名字要和theme文件夹下主题名一致


5. 重新运行测试,查看效果

hexo clean
hexo g
hexo s

五.码云部署

  1. 首先我们需要注册码云的账号，然后在创建一个仓库，这里初次使用码云的话可以，先看一下码云入门
  2. 当然注册账号我们可以直接进入码云官网：https://gitee.com/都是中文一看就会的那种
  3. 创建仓库
    特别要注意这里有个大坑：仓库名称，使用语言(JavaScript)，访问权限(公开)

作为小白的我，成功的掉进这个坑里爬了好几天，没爬出来，最终请教大神帮忙，才发现是此处的原因。
当时，写的仓库名不是我的用户名，导致码云pages部署的路径有问题，导致相对路径不对，读不到css样式和js运行文件，所有进去后就是这个样子，所以依次告警大家不要入坑

  1. 获取仓库地址

  2. 修改配置文件 在blog主目录下找到 _config.yml 打开进行配置，在代码的最底下找到此处

    修改之后的样子，
    特别注意这里还有个坑：修改代码时候注意空格，例如 repo： 后面都是有空格的，删除空格之后，后面运行的时候就会报错，这是编码的规定，还有就是deploy一定从行首开始写，不要加空格，注意格式

  3. 开始部署，我们需要输入以下命令

    npm install hexo-deployer-git --save
    hexo g //生成网站文件
    hexo d //上传到远程在码云上新建的仓库

    //也可以采用一键部署
    hexo g --d

此时会弹出对话框让我们输入码云的用户名和密码，我们输完以后，就会开始上传，在本地文件夹中会多出来.deploy_git文件夹（上传的是此文件夹下的内容，也就是生成的网站文件，另外我们本地编译生成的html 文件保存在public文件夹下）

登录码云账户，打开和自己用户名相同的仓库观察，如果出现和.deploy_git或者public文件夹下的文件就证明文件上传成功

7. 开启pages功能


这样我们就可以点击生成的域名来看我们搭建的效果了https://oldzhai.gitee.io

六.博客使用

1.编写文章

首先我给大家推荐一个软件 vsCode,这个软件占用空间很小，插件很多，功能特别强大，我们可以打开我们整个文件夹，进行修改代码，写文章，对我们提高效率很有帮助
下载：vsCode.exe

方法一
通过命令来实现

hexo new hello  //hello 为博客的文件名

同时会在 根目录下 /source/_posts 目录下生成hello.md

方法二
手动到根目录下 /source/_posts 目录下，创建一个makedown 文件进行编写就可以了

文件开头可以参考这里来写

---
title： file_name
tag： 标签名
categories： 分类
comment： 是否允许评论(true or false)
description：描述
---
文章的正文部分，可以参考markdown 语法格式来写

2.发布文章

我们还是使用命令，推送到gitee上

hexo g --d

推送成功之后，我们观察码云的远程仓库，我们的md格式的文件会自动生成到对应的目录，并且转化成html格式

我们在去浏览我们的网站，如何发现和之前一样没有找到我们发布的文章，我们就到码云的page服务，去更新

将 csdn 博客导出在我们自己新建的博客中的方法

点击导出，格式为makedown，复制到 /source/_posts 目录下，并加以修改添加一下部分，进行分类

---
title： file_name
tag： 标签名
categories： 分类
comment： 是否允许评论(true or false)
description：描述
---

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章

github+hexo 搭建个人博客