Hexo - 博客搭建基础教程

一时失言乱红尘 2023-07-09 02:04 91阅读 0赞

概述

建立个人博客的需求由来已久,能拥有自己的技术博客是广大程序员的梦想。相比于早些时候的WordPress、织梦等框架,就个人站点来说,用Hexo搭建博客可以用“怎一个爽字了得”形容。Hexo基于Node.js开发,具有轻量、方便、易部署等特点,主题丰富简约,依赖github即可构建站点,近些年受到广泛关注。此篇文章旨在和与我一样的初学者分享经验,有疑问欢迎在评论区交流。

准备工作

  • github账号:需要申请一个属于你的github账号,可以在这里申请。
  • git bash: 需要有git bash运行环境,相关安装和使用教程请询问度娘。
  • Node.js: 必须安装 Node.js 开发环境,建议参考Hexo 环境搭建。
  • 个人域名(可选):申请自己的域名可以有自己专用的地址解析链接,我使用百度智能云申请的域名,用着还不错,也比较便宜。
  • markdown:Hexo使用Markdown解析文章,不熟悉的同学可以移步Markdown 简明教程。
  • html\css\js基础: 有最好,没有也没关系。

Hexo的安装、初始化、本地预览

安装Hexo

在git bash环境下输入命令:

  1. npm install -g hexo-cli

初始化Hexo

在选好的文件夹下运行命令,我们以 TestHexo 为例设立我们的第一个Hexo 站点。

  1. hexo init TestHexo

安装

  1. cd TestHexo
  2. npm install

完成后在TestHexo 文件夹中会有如下内容:
初始化Hexo文件

如果你坚持到了这里,那么恭喜你:

此时本地的Hexo站点已经完成了(什么不是刚开始么?? 是的已经结束了)。

本地预览

为了查看本地站点实际效果,输入命令:

  1. hexo server

  1. hexo s

会在本地搭建服务器挂载生成的本地站点,通过访问 http://localhost:4000 浏览自己的网站。
预览页面

Hexo 部署到Github

在Github端创建仓库

仓库名:.github.io

安装Hexo-git 插件

执行命令:

  1. npm install hexo-deployer-git --save

链接本地与远程仓库

需要在本地建立SSh key,并添加到远程的github配置中。可参考Git 连接 Github 远程仓库

修改站点配置文件

站点配置文件为Hexo根目录下的 _config.yml文件,编辑该文件,找到相关部分并修改。

  1. # Deployment
  2. ## Docs: https://hexo.io/docs/deployment.html
  3. deploy:
  4. type: git
  5. repo: git@github.com:<Github账号>/<Github账号>.github.io.git #该地址写ssh地址,不写http地址。
  6. branch: master

推送到Github

依次输入命令:

  1. hexo g
  2. hexo d

当见到返回:

  1. INFO Deploy done: git

即为推送成功。

至此,您的Hexo博客已经搭建在GithubPages, 域名为https://<Github账号>.github.io

自定义域名

在站点部署在Github基础上,您也可以将自己购买的域名解析到刚刚建立的地址。

域名解析

在域名设置界面:

  • 类型选择为 CNAME;
  • 主机记录即域名前缀,填写为www;
  • 记录值填写为.github.io;
  • 解析线路,TTL 默认即可。
    域名配置

提示:域名需要按照国家要求备案
域名备案

仓库设置

进入github建立的hexo仓库,点击settings按钮设置仓库,在Custom domin中填入自己的域名,并Save:
仓库设置

本地设置

在Hexo站点目录source文件夹中,创建名为CNAME的文件,并向其写入自定义域名

  1. echo www.zywvvd.com >> CNAME #域名部分请替换为你自己的

CNAME文件

几分钟之后,即可通过该域名访问Hexo站点。 又见苍岚

更换主题

hexo主题有很多,默认主题为landscape。

更换主题需要下载主题包放在Hexo目录中themes文件夹内,如我下载了Next主题,文件夹如图所示。
Themes文件夹

并将站点配置文件中主题换成相应的主题名:
主题配置

主题可以在github现有的工作中挑选。

更多教程

欢迎访问又见苍岚。

发表评论

表情:
评论列表 (有 0 条评论,91人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Hexo个人详细教程

    写在前面的话 很早以前就想要搭建一个个人的博客,奈何只是一个前端切图仔,对于后端和数据库接口上手存在一定的难度,于是一拖拖了很久,今天无意中发现了使用Hexo搭建个人博客

    相关 Hexo Github

    ![配图][alejandro-escamilla-9.jpg] 前言 在 搬砖 的过程中,浏览了许多 别人写的博客后,自己也萌生了写博客的念头。 其一是为了系统的整

    相关 Hexo + Github Pages教程

    前言 一直以来自己都有书写文章的习惯,不管是收集资料还是表达自己的个人见解。最开始把资料都放在印象笔记里,但是印象笔记有个不好的点就是书写不方便,而且多设备登录不友好,需