30min快速搭建属于自己的个人博客

30min快速搭建个人博客

前言

刚读研的时候就有搭建个人博客的想法了,但是当时觉得搭博客很麻烦,又要学java又要学前端还要买服务器(其实主要是懒),这个想法就一直搁置。前段时间之后觉得有很多工作中的心得体会需要有一个平台去形成文字性的沉淀,于是重拾了搭博客的想法。经过调研后选择采用github+hexo框架来搭建博客,整个流程不到30min,就可以生成个性化的静态博客,而且完全免费。

什么是hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。此处附上Hexo中文官网。下面我们详细介绍搭建步骤。

安装git

  • git官网根据不同的系统下载即可

    git

  • 确认成功:执行git version,控制台打印出版本信息即安装成功

git version

安装Node

Node

Hexo基于Node.js,Node.js下载地址:Download | Node.js 下载安装包,注意安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js和npm是否安装成功,在命令行中输入 node -vnpm -v ,控制台打印出版本信息即安装成功

node & npm

安装Hexo

Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog,Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后,进入Blog文件夹中,打开command window或者ternimal终端

使用npm命令安装Hexo,输入:

1
npm install -g hexo-cli

这个安装时间较长耐心等待,安装完成后,初始化我们的博客,输入:

1
hexo init blog

看到如图提示则安装成功

blog init

分别按顺序输入以下三条命令

1
2
3
hexo new "test"
hexo g
hexo s

new page

然后就可以在4000端口看到博客页面了

界面

hexo的常见命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 现在来介绍常用的Hexo 命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

绑定github

刚才只是本地启动了hexo服务,我们还需要把这个网站发布一下,让他可以在公网被访问,我们可以通过绑定github的方式将我们的博客挂载上去

注册github

首先如果你还没有 Github 账号的先注册一个,详情参考百度注册教程。注册好GitHub后就 new repository 创建一个新的仓库,注意点来了,Github 仅能使用一个同名仓库的代码托管一个静态站点

静态站点

配置ssh key

参见如下博客

Github配置ssh key的步骤(大白话+包含原理解释)_github ssh key_风中一匹狼v的博客-CSDN博客

挂载到github

在blog根目录里的_config.yml文件称为站点配置文件,拉到底部填上如下配置

config

然后安装一个插件hexo-deployer-git

1
npm install hexo-deployer-git --save

最后执行以下命令就可以部署上传啦,以下 g 是 generate 缩写,d 是 deploy 缩写

1
hexo g -d

稍等一会,在浏览器访问网址: https://yourusername.github.io 就会看到你的博客了

博客写作

博客搭好了,就开始写文章了,这里简单介绍一下,详细的文档可以看 hexo 官网。

新建文章,输入以下命令即可

1
hexo new '文章标题'

执行完成后可以在 source文件夹里的_posts 下看到一个“文章标题.md“的文章文件了,用markdown语法写博客就ok了,写完后依次执行

1
2
3
4

hexo clean
hexo g
hexo d

就可以把文章推送到github了

附录

hexo在操作简单之外,还有一个很大的优点在于可以切换自己喜欢的主题,不同的主题在github都有演示,在hexo的官网可以自己搜索,主题的修改也几乎是傻瓜式,具体可以参考这边文章

Hexo配置主题Particlex保姆级教程-CSDN博客

另外我推荐hexo配合notion或者语雀文档和一些图床网站使用,notion可以把文档直接导出成markdown格式,然后把图片上传到图床网站生成url,在.md文件里替换一下路径,就可以在线查看博客里的图片了。

ps:这篇文章4月份就想写了,拖延症+在阿里云实习太忙一直没时间,后续希望自己还是能保持一个月1~2篇的博客产出,写写学习的心得体会、感受。


30min快速搭建属于自己的个人博客
https://shouldbeldy.github.io/2023/10/15/30min快速搭建属于自己的个人博客/
作者
Daoyu Lei
发布于
2023年10月15日
许可协议