【Hexo】手把手教你搭建属于你自己的博客

简介: 【Hexo】手把手教你搭建属于你自己的博客

零 楔子



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


偶然间了解到了 Hexo 这个静态博客网站,通过github绑定,无需购买服务器 就可以生成完全属于自己的博客网站(白嫖)。


因为不熟悉前端,我在搭建过程中也经历了许多的坑,现在我将搭建流程分享出来,希望能给你们提供一些帮助。这是我的两个博客网站:gitee.ioheeh.xyz,大家可以点开看看搭建好后的效果


最重要的是它是免费的,里面也有很多插件和博客主题模板,你完全可以根据自己的喜好来设置它的风格。


心动不如行动,现在就开始搭建属于自己的博客吧。有什么问题可以在评论区讨论,觉得有用的兄弟萌可以点个赞😝


一 运行环境准备



本文环境信息:

  • win10 + vscode(可以是任意文本编辑器)
  • Node.js
  • Git
  • 修改npm为淘宝镜像源,并设置cnpm


  1. 环境的下载只需点开网站找到适合自己的版本安装即可,这里不赘述🍉。
  2. 安装完毕后可以通过cmd命令行输入node -v,npm -vgit --version来验证,如果出现下图则安装成功。


image.png


修改npm的镜像源为在国内更为稳定的淘宝镜像源(建议永久设置)


# 临时改变镜像源
 npm --registry=https://registry.npm.taobao.org
 # 永久设置为淘宝镜像源
 npm config set registry https://registry.npm.taobao.org
 # cnpm安装,在国外服务器不佳时就可以用cnpm代替npm命令
 npm install -g cnpm --registry=https://registry.npm.taobao.org


二 Github准备



  1. 打开GitHub,登陆你的账号。
  2. 新建一个格式为你的用户名.github.io的仓库

image.png


  • 创建成功后在桌面点击右键,Git Bash Here,打开Git的命令行输入这两行代码:


git config --global user.name "此处填写你注册github时的用户名"
 git config --global user.email "此处填写你注册github时的邮箱"
复制代码


  • 然后就可以在C:/Users/[username]/下找到.gitconfig文件(如果没能找到,请打开显示windows显示隐藏文件的功能),用编辑器打开看到以下内容代表配置成功。

image.png


三 安装Hexo



  1. 首先新建一个文件夹👀作为你的博客文件的存放位置,点进去打开Git命令行分别输入:


# hexo框架的安装
  npm install -g hexo-cli
  # 等上一个命令完成后,再输入下面的命令
  hexo init
  # 安装博客所需要的依赖文件
  npm install
复制代码


💥 Tips:Hexo一大好处就是你在安装过程内出现了任何问题,都大可以删掉文件夹重来。 注意后续所有操作都应该在这个文件夹目录下进行~


  1. 等待运行完成,你会发现此时文件夹内多了好多文件。此时本地搭建完成,我们来运行一下试试看,输入以下命令:


hexo g
 hexo s


image.png


  1. 根据提示我们打开 http://localhost:4000 ,就可以看到生成的网页,说明Hexo已经成功在本地运行。


四 发布到Github



我们已经完成了Hexo下载安装和本地运行,接下来将本地博客发布到Github让别人也能通过网址访问你的博客。


  1. 在本地文件夹下打开Git命令行,分别输入以下命令


# 安装用来发布的插件
 npm install hexo-deployer-git --save
 # 将本地目录与Github关联起来
 # 这步输入后一直回车即可
 ssh-keygen -t rsa -C "你的邮箱地址"
复制代码


  1. C:/Users/[username] 目录下找到名为.ssh 的文件夹,打开其中的 id_rsa.pub,复制里面的的内容。 然后打开 Github,点击右上角的头像 Settings 选择 SSH and GPG keys


image.png

点击 New SSH key 将之前复制的内容粘帖到 Key 的框中,Title 可以随意,点击 Add SSH key 完成添加。


image.png


  • 回到命令行界面测试是否与Github连接成功,输入ssh -T git@github.com,出现一个询问内容输入yes,出现You’ve successfully …说明连接成功。


  • 进入博客站点目录,用文本编辑器打开_config.yml,这个_config.yml 是博客的配置文件,在以后会经常使用到,修改如下图的几个地方:


image.png

然后滑到文件最底部deploy处添加如下代码:


type: git
 repo: git@github.com:github用户名/github用户名.github.io.git  
 branch: master


image.png


  1. 最后一步,生成页面并发布,我们执行如下命令:


# generate, Hexo会根据配置文件渲染出一套静态页面
 hexo g
 # deploy, 将上一步渲染出的一系列文件上传至至Github Pages
 hexo d
 # 或者也可以直接输入此命令,直接完成渲染和上传
 hexo g -d
复制代码
  1. 上传完成后,在浏览器中打开网址 你的github用户名.github.io,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话等一下或按ctrl+f5刷新清除一下浏览器缓存试试。


五 写文章



  1. 在博客文件夹的/source/_posts目录下新建或修改md格式的文章,每个文章前都至少添加以下front-matter字段。


---
 title: hexo文章
 date: 2021-08-17 22:25:00
 ---
复制代码
  1. 每次上传都应该在命令行输入:


hexo cl
 hexo g -d


目录
相关文章
|
前端开发 IDE 编译器
HBuilderX 最新安装使用教程,附详细图解,持续更新
HBuilderX 最新安装使用教程,附详细图解,持续更新
|
2月前
|
开发工具 git
NotionNext 笔记博客部署 图文教程①
如何使用NotionNext工具将Notion笔记实时渲染成静态博客网站,从创建Notion账号、复制模板、获取页面ID、复制源代码到Vercel部署的完整步骤。
NotionNext 笔记博客部署 图文教程①
|
5月前
AutoLisp入门教程
AutoLisp入门教程
|
6月前
|
数据采集 JavaScript 前端开发
❤Nodejs 第一章(认识安装)
【4月更文挑战第1天】Nodejs 是一个跨平台的 JavaScript 运行时环境,基于Chrome的V8引擎。它以异步I/O和事件驱动为特点,用于构建高效、可扩展的网络应用。Node.js 使用npm作为包管理工具,拥有大量的模块资源。它适合IO密集型应用,但不适宜CPU密集型任务。其应用场景广泛,包括前端框架、后端服务、爬虫、桌面应用、移动应用、构建工具和CICD流程等。
102 1
❤Nodejs 第一章(认识安装)
|
6月前
|
安全 测试技术 数据库
Sqli-lab教程-史上最全详解(1-22通关)_sqlilabs(1)
Sqli-lab教程-史上最全详解(1-22通关)_sqlilabs(1)
|
6月前
|
消息中间件 运维 关系型数据库
KnowStreaming系列教程第一篇——安装和使用
KnowStreaming系列教程第一篇——安装和使用
437 0
|
11月前
|
前端开发 Cloud Native 安全
简单使用 Hugo 博客
简单使用 Hugo 博客
125 0
|
JavaScript 安全 前端开发
【超详细】Zod 入门教程
Zod 是一个以 TypeScript 为首的模式声明和验证库 ,弥补了 TypeScript 无法在运行时进行校验的问题 ,既可以用在服务端也可以运行在客户端,以保障 Web Apps 的类型安全
566 0
【超详细】Zod 入门教程
|
移动开发 算法 Java
Android逆向环境搭建
Android逆向环境搭建
|
开发工具 git
小白进阶,带你玩转Github~
小白进阶,带你玩转Github~
小白进阶,带你玩转Github~