为什么要搭建属于自己的博客

问：为什么要搭建属于自己的博客呢？

答：在这里，可以定制自己的个人网站，分享自己的生活和经验，帮助到他人的同事，也能方便自己更好的找到自己想要的东西，防止知识的遗忘。同时还会有小小的成就感，并且可以提升自己的写作能力。

问：要收费吗？

答：当然是免费的。当然，如果你能不断的坚持，还能为你带来一点小小的收入。

有些对代码一无所知的朋友，即便没有编程基础，也能通过教程搭建自己的博客。当然来访的可能还有一些有编程能力的，对教程的内容不要吐槽啰嗦，自行略过，挑重点即可。那么接下来开始进行博客的搭建

环境准备(针对Windows系统搭建)

操作系统：Windows 10

1：GitHub

2：Node.js

3：Hexo

4：VsCode(推荐)

以上环境，在自己的电脑配置好就可以开始搭建博客了。

安装 Git

Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git的读音为/gɪt/。 Git是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理。

Git安装

点击 Git 官网根据你电脑系统的配置信息，下载对应的安装程序。

image-20220218150307923

image-20220218150331712

1 :下载好 Git 的安装包，开始安装，打开安装包，出现如图的界面，无脑下一步下一步就可以了。image-20220218150348271

企业微信截图_16451679327135

image-20220218150626778

2 :安装完成后，进入桌面

image-20220218151356038

输入：git –version

​ git –version

image-20220218151506884

出现图示版本号即为成功~。

注册自己的git账号

点击GIT官网进入官网首页

1 ：点击Sign up

image-20220218152221368

2：输入自己的邮箱 点击下一步

image-20220218153522936

image-20220218155212666

3 输入基本信息

image-20220218155324491

4选择免费版本

image-20220218155414427

出现如下界面就表示创建成功！

image-20220218155433547

安装Node.js

进入Node.js官网

image-20220218160321638

下载后点击安装

image-20220218160433837

选择自己的安装路径

image-20220218161424318

依旧是无脑下一步下一步完成即可。 出现如下图表示安装成功

image-20220218160956103

打开命令提示符输入node -v 和 npm -v 出现版本号即为成功

1
2
node -v
npm -v

image-20220218160543156

配置环境变量（防止安装的模块和缓存都在系统盘c盘）

配置全局安装的模块路径和缓存路径（不一定是安装路径） 在nodejs文件夹,创建 node_global 在nodejs文件夹,创建 node_cache

image-20220218161623497

创建好后，在命令提示符运行如下命令,输入回车即可

1
2
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

image-20220218162026857

配置环境变量

  • 进入 “我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

  • 选择 系统变量 创建 NODE_PATH 变量

    • 变量名：NODE_PATH
    • 变量值：D:\Program Files\nodejs\node_modules(安装的路径)
    • image-20220218162447899

  • 在 系统变量 中 选择 Path 添加如下属性：

  • 把前半部分的nodejs路径换成自己的nodejs的路径

测试安装

进入命令提示符 输入如下代码进行安装测试

1
npm install express -g

image-20220218162910326

在自己配置的D:\nodejs\node_global\node_modules （这是我的）出现express文件夹则表示成功

image-20220218162823732

修改npm源

由于官方 NPM 源下载 包的速度太慢，所以我们将 NPM 的源 替换成 淘宝源，命令提示符运行如下命令即可：

1
npm config set registry https://registry.npm.taobao.org

那么 Node.js的安装就完成了~。

3：Hexo安装

3.1 首先进入一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为 testBlog 的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择 Git Bash Here，然后依次输入如下命令

image-20220218164115552

右键 Git Bash Here 依次输入以下命令即可

1
2
3
4
5
6
7
8
#1:hexo框架安装
npm install -g hexo-cli
#2:初始化文件夹
hexo init <新建文件夹的名称>  
#3:进入你的文件夹
cd <新建文件夹的名称>
#4:安装博客所需要的依赖文件
npm install

image-20220218164606559

安装完成后 输入如下命令

1
2
hexo g #生成文件
hexo s #启动项目

image-20220218164852678

在浏览器输入http://localhost:4000/ 出现如下样式则表明您的博客搭建完成啦~

image-20220218165112643

4：安装VsCode

​ VsCode介绍 ：VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

VS Code 使用 Monaco Editor 作为其底层的代码编辑器。

在 2019 年的 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。

Visual Studio Code 默认支持非常多的编程语言，包括 JavaScript、TypeScript、CSS 和 HTML；也可以通过下载扩展支持 Python、C/C++、Java 和 Go 在内的其他语言。支持功能包括语法高亮、括号补全、代码折叠和代码片段；对于部分语言，可以使用 IntelliSense。Visual Studio Code 也支持调试 Node.js 程序。和 GitHub 的 Atom一样，Visual Studio Code 也基于 Electron 框架构建。

Visual Studio Code 支持同时打开多个目录，并将信息保存在工作区中以便复用。

作为跨平台的编辑器，Visual Studio Code 允许用户更改文件的代码页、换行符和编程语言。

使用此编辑器能够更好的帮助我们找到代码需要修改编辑的地方，提升自己的效率。

安装VsCode

image-20220314170143849

img

选中接受协议选项，然后点击 Next：

img

选择安装路径，也可以直接使用默认的：

img

点击 Next：

img

注意安装路径设置、环境变量默认自动添加到系统中，勾选以下所有选项：

img

最后我们点击 Install 就可以完成安装了：

img

img

安装汉化包

VScode 安装汉化包很简单，打开 VScode，点击安装扩展，在搜索框输入 Chinese，然后点 Install 就可以：

img