虽然有知乎、CSDN、简书、博客之家等各种“博客”平台,但是随着套娃现象、低质量水文、随意剽窃越来越多,让人很不爽,还有想纯粹装个B假装一下大佬,不妨搭建个自己的个人博客。博主本人经历了hexo+github、typecho+腾讯云服务器等各种尝试,决定写一篇hexo+gitee的免费的搭建个人博客教程。

博主自己的博客

博主现在在用typecho+腾讯的云服务器搭建博客,个人觉得比较好看,但是比较烧钱,需要买服务器,需要买域名,还要懂点前端技术,玩的比较花哨。本篇博客主要想让大家能快速上手并且免费地搭建自己的博客。

对了,顺便蹭个访问量,嘻嘻:陶小桃Blog(点击访问)

注意,下面这个图不是本次教程的效果,本次教程是个初级入门教程。

博主现在使用的个人博客

下面这个博客是我以前的一些尝试,虽然现在已经处于被我废弃的状态了,基于hexo+github搭建的,主要是前期对搭建博客的探索。对于大多数人来说,可能简单的稳定的免费的是更加关心的。

基于hexo+github的个人博客

一、为什么选择hexo+gitee这样的组合?

hexo比较简单,是一个全自动的部署方式,网上有大把大把的教程,有问题百度一搜就能搜到,而且很简洁轻便,就那么几个常用的命令,让零基础的小朋友都能快速上手。

为什么不选github呢,用过的都说好,为什么博主却不建议用?这是因为github在国内不稳定,有个叫做墙的东西时不时就会让你打不开,上传起来也很费劲。github还全是英文的,可能让本来就没啥编程基础的你更加懵了。总结一下就是:

  • gitee 是国内的网站,相较于 github 访问速度更快,更加稳定;
  • 不需要各种备案就能直接开始干
  • 全是中文的,好懂;
  • gitee应该是有免费的5G空间,虽然看上去只有5G,但是码字码5G,感觉可能够一辈子;
  • 全是静态文件,访问速度快;
  • 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
  • 数据绝对安全,基于gitee的版本管理,想恢复到哪个历史版本都行;

但是也有几个不足,提前说明一下:

  • 不能有自己的域名,比如想搞个什么www.txr.com或者www.txr123.cn之类的自定义域名需要每年花九十块钱,指定的域名是自定义.gitee.io
  • 需要先实名认证,才能开通Gitee Page,这是前提
  • 只能托管静态的网页,动态的不行,虽然个人博客静态的就够用了
  • 管的比较严,仅仅发个人博客,合法的东西,要是搞事情可能你号就没了

二、搭建hexo博客的步骤

不用担心自己没有编程基础,跟着做就行,不用知道为什么,按步骤来就好。基本每一步都有说明,非常贴心。

2.1 环境安装

软件安装因为我的系统使win10的,所以是都选择Windows版本的最新安装包,下载完一顿安装就好了。

免费注册码云账号,官网地址:: https://gitee.com/

注册gitee

下载并安装 Git,官网地址: https://git-scm.com/downloads

下载Git

下载安装 Nodejs:http://nodejs.cn/download/

下载安装 Nodejs

2.2 环境配置

首先检测一下前面安装的情况。

按下键盘的win+R键,然后在运行中输入cmd,调出一个黑乎乎的框框。

WIN+R键

输入cmd

黑乎乎的命令框

然后输入一下命令,以验证安装完成,只要不报错就行,可能和我的返回内容不完全一样:

验证git和npm成功安装

2.3 搭建hexo

更换npm更换源

主要是为了安装快点,更加稳定。

npm config set registry http://registry.cnpmjs.org/

安装hexo

npm install -g hexo  

安装hexo

安装完成

新建一个文件夹,非常重要的文件夹,是你博客的存放的地方,建议路径中不要有中文。例如我在E盘新建了一个MyBlog文件夹。

MyBlog文件夹

在这个文件夹下右击鼠标,选择Git Bash Here

image-20211222212052828

依次输入一下命令:

hexo init GiteeBlog
cd GiteeBlog
npm install

hexo init GiteeBlog命令

执行完成后会新建一个GiteeBlog文件夹,里面有一些文件

依次输入:cd GiteeBlog和npm install,这里不再截图

其实这时候就已经安装了一个默认的主题了,我们可以打开看一下,这里记住两个最常用的的命令,就是

hexo g
hexo s

hexo g 类似于c++里的编译

hexo g命令

hexo s类似于c++里的运行

hexo s命令

之后就可以直接在浏览器里输入这个网址http://localhost:4000 (别乱按ctrl+c,这是停止命令)

停止了也没事,再输入hexo s就可

打开本地的网页

初始hexo页面

能打开这个页面,说明你的博客之旅已经开始了。

2.4 更换主题

上面看的就是默认主题。有一说一,确实有点丑。hexo有很多的主题,可以在HEXO主题官网中自己挑选。

我这里选择一个最流行的主题之一——Next主题。虽然看着丑,但是改起来是个无底洞,网上各种魔改教程,一搜一堆。这里仅做演示,具体的修改美化自行百度。直接参考这篇博文就可安装好Next主题。

下载主题

Next主题官网

Hexo Next 主题安装、配置及美化

上面的安装很多都失效了,各种报错,直接使用我下面提供的:

git clone https://hub.fastgit.org/theme-next/hexo-theme-next.git

安装好Next主题

hexo-theme-next主题移到themes文件夹下,并改修文件夹的名字为next

移动主题文件夹

启动主题

把theme改为next

启动主题

然后hexo g和hexo s,查看效果

Next主题效果

魔改主题

这个主题乍看好丑,但是这是一个可以各种魔改的主题,这是后续操作,暂时不管他。

百度搜索hexo的next美化教程,效果跟整容似的。这里不再过多介绍。

三、将博客托管到Gitee中

3.1 创建仓库

前面已经注册了Gitee账号,现在就来创建仓库吧。

新建一个仓库,用于存放你的博客的相关文件的,推荐仓库名和用户名一样,这样可以省去后面的很多路径问题。
几个注意的地方:

  • 注册的邮箱一定要验证,否则不会成功;
  • 推荐仓库名和用户名一样,这样后面可减少出现路径问题导致的 CSS 样式不加载、图片不显示问题;

新建仓库

配置仓库

仓库配置2

然后就成功创建了一个个人仓库

成功创建仓库

3.2 SSH连接

先输入

cd ~/.ssh          #检查本机是否已存在的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

再输入:

ssh-keygen -t rsa -C "邮件地址"

生成SSH文件

然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录(C:\用户\你的用户名\),找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的githee主页,右上角进入设置 -> SSH公钥

.ssh文件夹

粘贴ssh

成功添加ssh

测试是否成功:

ssh -T [email protected]

成功连接

接下来还需要配置用户名和邮箱:

git config --global user.name "xxx"    #你的 gitee 用户名,即注册时的用户名,个人主页最大那个就是了
git config --global user.email  "[email protected]"  #填写你的gitee注册邮箱

设置用户名和邮箱

3.3 上传到 gitee

首先,ssh key肯定要配置好。
其次,配置根目录下_config.yml中有关deploy的部分:

deploy:
  type: git
  repo: https://gitee.com/用户名/仓库名  
  branch: master

配置deploy

_config.yml这里面都是一些全局配置,每个参数的意思都比较简单明了,所以就不作详细介绍了。
需要特别注意的地方是,冒号后面必须有一个空格,否则可能会出问题。

接下来我们还需要安装一个插件,在 git bash 下输入

npm install hexo-deployer-git --save
npm install hexo-deployer-git --save

如果我们没有安装插件,此时直接执行 hexo d 的话一般会报如下错误:

Deployer not found: gitee 或者 Deployer not found: git

我们测试一下:

hexo d

会弹出这样的窗口,需要登录一下:

登录

点击确定后继续上传,上传成功是这样的:

上传成功

上传成功后查看gitee仓库:

仓库里已经有内容了

3.4 开启Gitee Pages

Gitee Pages开启

如果没有身份证验证什么的,需要开启一下。审核应该一天就可以了。

我已经提交过了。

配置后,确定即可。

配置Gitee Pages

开启成功,获得域名

3.5 访问域名

成功访问域名

能打开,说明你已经基本成功了,剩下的就是主题整容了

四、hexo常用命令

常见命令

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

五、Next主题自定义教程

网上的教程太多了,建议自己每次修改都运行上传,然后打开看一下效果,要是出问题了,就改回去。

Hexo-Next 主题博客个性化配置超详细,超全面(两万字)

NexT主题基础外观设置

hexo next 主题优化 | 这里可能有你遇到所有问题的答案

Hexo-next主题优化篇

要是有什么问题,也可以给我留言我,一同探索。



博主个人公众号
版权声明 ▶ 本网站名称:陶小桃Blog
▶ 本文链接:https://www.52txr.cn/2021/hexoblog.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!

最后修改:2022 年 06 月 19 日
如果觉得我的文章对你有用,请随意赞赏