一文教会你如何搭建个人博客

太过爱你忘了你带给我的痛 2021-08-01 02:35 448阅读 0赞

![640?][640]

阅读文本大概需要 10 分钟。

**一、为什么要搭建个人博客？**

***1、***如果我们热衷于技术，第一个可能想到的就是 Github ，Github 上各种开源的项目在我们小白初级阶段完全看不懂，但是我们既要融入这个全球最大的交友网站 Github上来，又要在 Github 上展现出我们对技术的热情，那么今天这篇文章就是你最好的一个选择，搭建一个个人博客，你可以不会html/css网页设计，可以不会软件开发，只要你按照这个流程走，就可以搭建起一个属于自己的个人博客，你写的文章可以传到个人博客，写的笔记也可以传到个人博客，你的开源项目也可以在个人博客做介绍。如果别人看到了你的文章并收获了很多知识，就会给你点亮一颗星，这颗星与QQ空间的点赞可不一样，如果你有一个文章或者一个开源项目点星到了100，那就说明你已经在里边很牛了，但是想得到这100个星也是很难的。

***2、***只有一个钟情技术的人，才会想像朋友圈一样每天关注 GitHub，维护 GitHub。所以你“绿油油”的 GitHub 是你的技术热情的最好体现。 那么，我们就从个人博客开始维护，面试的时候面试官看了你这 Github 上“绿油油的”一片，就知道了你对技术有多么热情，下图你会心动吗？

![640?wx\_fmt=png][640_wx_fmt_png]

PS: 曾经一个技术很不错的小伙伴终面的时候挂了，面试系统中的备注是：“看不到他对技术的热情”。所以这也会作为面试的一个考量。

如果有两个人去面试，别人 Github 上“绿油油”一片，你的确是撒哈拉大沙漠，一点都体现不出你对技术的热情。

**二、建站前的准备**

建站之前我们先要做好准备工作，将相关的工具准备好。

**1、安装 Node.js**

> Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

安装网址：**https://nodejs.org/zh-cn/**

验证是否安装成功：打开cmd命令行(win+r 输入cmd回车)执行 ：

1node -v  
2npm -v

安装成功之后显示版本号：

![640?wx\_fmt=png][640_wx_fmt_png 1]

![640?wx\_fmt=png][640_wx_fmt_png 2]

**2、安装 Git**

> 通常使用 github 的对 git 并不陌生，Git(读音为/gɪt/。)是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。 \[1\] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

安装网址：**https://www.git-scm.com/download/win**

验证是否安装成功：打开cmd命令行(win+r 输入cmd回车)执行 ：

1git --version

安装成功之后显示版本号：

![640?wx\_fmt=png][640_wx_fmt_png 3]

**3、安装 Hexo**

> Hexo 是一个快速、简洁且高效的博客框架。

了解更多关于 Hexo 请查看官方网站：**https://hexo.io/zh-cn/**

**① 安装 hexo 框架**

下面一起来看看怎么安装 Hexo 框架？

首先选择一个文件夹，这个文件夹主要存放关于你博客的配置文件以及以后要写的的文章，在该文件夹的根目录运行之前下好的 git-bash.exe 。

![640?wx\_fmt=png][640_wx_fmt_png 4]

输入命令开始安装：

1$ npm install -g hexo-cli

这里安装的是hexo最新版本，如果想安装以前的的版本请运行命令$ npm install -g hexo

以上步骤不出问题的话就已经在本地机器上搭建起了 Hexo 环境。

下面介绍 Hexo 的具体使用方法。

**② 初始化Hexo**

A、创建hexo工程

1$ hexo init blog

创建一个文件夹blog（blog 为文件夹的名字，可改成自己想要的名字），使用 Hexo 命令初始化 blog 为 hexo 工程目录。

B、新建POST

1$ cd blog  
2$ hexo new “HelloWorld”

进入初始化后的 blog 文件夹，创建名为HelloWorld的文件，此时会在 /blog/sources/\_post/ 目录下生成 HelloWorld.md 文件。

进入初始化后的blog文件夹，创建名为HelloWorld的文件，此时会在/blog/sources/\_post/目录下生成HelloWorld.md文件。

C、生成静态文件

1$ hexo generate

使用 Hexo 引擎将 Markdown 格式的文件解析成可以使用浏览器查看的 HTML 文件，HTML 文件存储在blog/public 目录下。

D、运行hexo服务器

1$ hexo server

打开命令行提示的地址，一般是 ：

**http://localhost:4000/**，既可以看到我们的 Hexo 网站。

此时 Helloworld 文章中没有任何内容。打开 /blog/sources/\_post/ 目录，使用编辑器打开其中的 HelloWorld.md 并在其中添加 markdown 格式的内容保存，然后重新运行以下命令：

1$ hexo generate  
2$ hexo server

命令的含义：hexo generate 生成静态文件， hexo server 启动服务器。默认情况下，访问网址为： http://localhost:4000/。 如果重新改变端口号请详细查看官网文档，这里不多介绍。

**注意：**如果在 HelloWorld.md 文件中有中文，在网页进行浏览可能出现乱码，解决方式通过编辑器打开HelloWorld.md 文件把编码方式改成 utf-8 就可以了。

**③ 安装主题**

Hexo 提供了默认主题 landscape，主题的位置在 blog ->themes 文件夹下。主题根据自己喜好可以在网上找到，通过 Git 进行相应的下载。下面贴出几个主题可以进行相应的下载，喜欢哪一个可以进行配置到自己的个人博客了。

主题一：hexo-theme-next（我用的主题是这一个，后期是自己改进美化的）

主题二：Casper

主题三：daleanthony

主题四：hexo-theme-yilia

主题五：jacman

主题六：hexo-theme-apollo

我给大家找了一个主题链接可以选择自己喜欢的主题：更多主题

A、配置主题

1$ cd /blog/themes

打开 git-bash 切换到 blog -> themes 目录下，如果在目录 blog ->themes 右键选择启动 git-bash 就不用切换了。如果在桌面直接启动 git-bash ,可通过下边命令切换到 blog ->themes目录下。

1$ cd /blog/themes

选好一个主题，复制主题的 github 地址，通过 git 命令进行下载。（例：https://github.com/iissnan/hexo-theme-next 为一个主题的 github 地址）

1git clone https://github.com/iissnan/hexo-theme-next

下载完之后我将文件夹改成 next 了（也可以不改，我为了名字简洁点）。

![640?wx\_fmt=png][640_wx_fmt_png 5]

然后在修改 /blog/config.yml 文件，将其中的 theme 改成 next。（这个是改变主题的地方，如果你用的是其他的主题，将这个 next 改成你下载下来的主题的文件夹的名称）

![640?wx\_fmt=png][640_wx_fmt_png 6]

重新运行以下命令，查看更换主题后的效果 ：

1$ hexo generate  
2$ hexo server

**三、申请 Github 免费静态内容空间**

**1、注册 Github 账号**

我们去 Github 的官网进行账号注册 ，注册完成之后我们根据官方文档进行配置 ，然后我们使用自己的账户创建一个 Repository （仓库）。

![640?wx\_fmt=png][640_wx_fmt_png 7]

![640?wx\_fmt=png][640_wx_fmt_png 8]

点击网站右上角的 + 号，选择 New Repository( 注意：创建仓库的名字要你的注册的用户名一致。其他默认，确定创建)。

之后你的静态内容空间就已经创建好了，在浏览器输入你的 your username（用户名）.github.io  就可以访问了。

**四、将 Hexo 上传 Github 上**

**1、步骤一：安装 deployer-git （安装部署工具，方便以后更新）**

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

**2、步骤二：在 /blog/\_config.yml 中修改 deploy 属性(注意“：”之后有空格 ) 否则配置失败。**

1deploy:  
2  type: git  
3  repository: https://github.com/你的地址  
4  branch: master

将上方的 Repository 换成你申请的 Git 仓库地址

使用 https 的方式部署每次提交到 Github 都要输入用户名和密码，如果嫌麻烦请使用 SSH 的方式，百度/谷歌自行搜索。

**3、步骤三：初始化本地仓库**。

1git init

**4、步骤四：连接远程仓库 ( 如果是第一次使用 git，在使用 git 的时候会提示输入用户名和密码，用户名是自己的注册邮箱。 )**

1git remote add origin 你的仓库地址

点击原文可以查看小鹿的博客，预览一下博客效果哦。

[640]: /images/20210731/0363b72a6c2149ee88a908d6af6ddf57.png?
[640_wx_fmt_png]: /images/20210731/ec76943e9ac241c58f37d132255c6efd.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/e86e19cc79f74599b1cdac32b6eed99f.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/d2415491c80149868d4890a92919f4d8.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210731/81abc74ed0d94091b6d3c19129e57b05.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210731/d700dfdaed2b4ea7bba09be24f7964ec.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210731/ba7daa0f4e754c4a9e0b9a7005b98861.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210731/0a5e6ceb61304fb7b5ea85cd4fe534be.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210731/75c61fae846e454d964e8ee74cfcdc44.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210731/ae1572c8f52d4ca6a240c292ea04d3dc.png?wx_fmt=png