手把手教你搭建个人博客

在搭建之前先带大家了解一下几款常见的个人博客搭建框架

1.Hexo框架

Hexo框架是一个快速、简洁和高效的博客框架。全文采用非常火爆的Markdown语法解析，只需要在几秒内就可以生成静态网页。

2.wordpress框架

WordPress使用的是PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。有着许多第三方开发的免费模板，安装方式简单易用。

3.Typecho框架

Typecho基于PHP5开发，支持多种数据库，是一款内核强健﹑扩展方便﹑体验友好﹑运行流畅的轻量级开源博客程序。

我使用的是Hexo框架搭建的静态博客，至于为什么使用Hexo多搭建，主要是他不需要额外购买服务器部署，搭建非常简单。目前我的博客地址为：jsckot.top ，搭建初期有很多不足的地方，目前还正在完善和更新中。

Hexo搭建步骤

  • 本人使用的是Windows系统，所以本文主要是针对windows搭建博客系统。

1.安装node.js

由于Hexo是基于node.js的框架，所以需要用到node.js的里面的工具。

直接去node.js官网下载，然后傻瓜式安装即可。我这里使用的时 [v14.21.3]版本。

安装完成之后打开cmd执行

node -v
npm -v

查看是否安装成功。

2.安装Git

由于Hexo是一款静态博客框架，所以我们每次新发布文章时，都需要使用版本控制工具Git进行文章迭代。使我们更好的管理自己的博客系统。

到git官网上下载,Download git,下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。

安装好之后，使用

git --version

查看Git的版本号，我使用的是git version 2.37.2.windows.1版本。

3.安装Hexo

由于前面我们已将将Node.js安装好了，可以使用npm命令来安装Hexo。

我们可以先创建一个文件夹，我这里叫 jsckot_blog ，然后cd到该文件夹下，右键打开 git bash，当然你也可以用cmd进行操作。

输入命令

npm install -g hexo-cli

安装完之后输入

hexo -v

查看一下版本号。

  • 恭喜你，所有准备工作已经完成！

下面进行Hexo的初始化

hexo init jsckot_blog

  • init 后面的名字大家尽量不要使用中文

    然后进入刚刚创建的博客路径，下载依赖

cd jsckot_blog
npm install

jsckot_blog文件夹中主要有：

  • node_modules: 依赖包

  • public：存放生成的页面

  • scaffolds：生成文章的一些模板

  • source：用来存放你的文章

  • themes：主题

  • ** _config.yml: 博客的配置文件**

    hexo g
hexo server

    此时，我们可以打开浏览器输入本地4000端口 localhost:4000 访问刚刚创建的博客。

    image-20230723234401328

想要关闭服务可以使用ctrl+c 关闭本地博客。

4.在GitHub上创建个人仓库

相信大家都有github账号，这里就不过多叙述了。

登录自己的github账号之后，需要创建一个仓库用来存放博客系统。

image-20230723235231800

创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是xxxx.github.io，其中xxx就是你注册GitHub的用户名。我这里是已经建过了。

image-20230723235535857

5.生成SSH添加到GitHub

回到你的git bash中，设置用户名和邮箱，如过之前绑定可以跳过

git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

可以用以下两条，检查一下你有没有输对

git config user.name
git config user.email

创建SSH，一直回车即可。

ssh-keygen -t rsa -C "youremail"

完成之后他会告诉我们已经生成了 .ssh的文件夹。

image-20230724000133449

id_rsa.pub就是我们要添加github上的公钥。

然后我们点击GitHub中的Setting（点击个人头像可以看到），点击左侧 SSH and GPG keys，点击右上角的 New SSH key

image-20230724000832440

将上面提到的 id_rsa.pub 文件中的内容复制到Key中。

在git bash 中输入命令

ssh -T git@github.com

查看是否配置成功。

6.将Hexo部署到GitHub中

这里主要将hexo和GitHub关联起来，之后可以将文章放到GitHub中，打开之前生成好的 _config.yml 文件，找到deploy 按照如下配置进行修改，repo可以是你GitHub中存放博客系统的SSH网址路径，也可以是http协议网址，我使用的是SSH网址，之后会很方便。

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

修改完之后，我们将要把博客系统部署到GitHub上了，需要安装一个部署工具，在git base 中输入

npm install hexo-deployer-git --save

然后输入经典三部曲(之后这三个命令我们经常用到)

hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的东西，也可以缩写成hexo c。
hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写
hexo deploy 部署文章，可以用hexo d缩写

恭喜你，你的博客系统已经部署到了GitHub上。

  • 这里有一个小坑，我们在部署时写的分支是master，我遇到的情况是在部署时他默认给我上传到了main分支，我们可以在GitHub中修改默认分支为master

7. 设置个人域名（选做）

如果你想让你的个人博客网站更有个性，可以去买一个域名，我购买的是阿里云的域名。

买完之后我们需要将域名和搭建的博客项目进行绑定，我这里使用的策略是 vercel +阿里云域名。

打开vercel之后，将自己的github账号与vercel进行绑定，

image-20230724112341730

我这里之前已经绑定过了所以就不演示了，登录成功之后，点击右上角的Add New –>Project 选择博客项目，导入。在Overview界面就可以看到刚刚导入的项目了。点击项目，进入到项目详细界面。

image-20230724112758039

点击Domains 将购买的域名输入到vercel中—>Add 会得到一个需要解析的代码，包含Type Name Value ，将这三个对应的代码添加到我们域名的站点进行解析，之后我们还要在添加一个CNAME类型的解析码。

到这里就可以直接通过域名直接访问我们的博客了！

但是还要将博客项目根目录下的_config.yml 中的url改成刚刚设置的域名网址。

至此，所有项目的部署就结束了！