不断跳坑搭建个人博客

搭建个人博客记录

前言

为了更好地做好学习笔记,可以把自己所学的东西放在博客里,可以算是一种记录,算是一种象征。

虽然说自己所学的东西并不特别,大牛们应该早就会了,在网上也能找到各种各样的教程。但是自己能做好记录保留下来,这种感受是不一样的。个人认为看着自己的文章出来还是有一点小小的成就感。

也更方便自己回顾。现在我还在不断地学习新东西,大方向是 ctf 的 web 模块,平时可能也会做一些这方面的题目。但是其实发现自己看过学习过的东西还是会忘记(是东西太多了吗,可能我太菜了,越菜越要努力呀),不过至少还是记得是看过学过这个知识点的,就可以打开自己的记录,重新再看一看,回顾一下。这样多次学也能多理解和熟练一点吧。

对于本人,今年刚上大一,用博客学习一个多学期(一百七八十天),没有天赋,也没有有些人从很早就开始学。从最基础开始学,好在有学长带着我们走了一些路,不然估计已经跌在路上不起来了。
从一开始就选择了在这里(csdn)扎根,到现在尽量保持每个学期都有所学习,保持每个星期有学习记录然后发博客。

之前我都不知道还能搭建个人博客,还能自己有网站。
之后见识了各路大佬的个人博客,觉得很气派,很羡慕,就慢慢尝试自己也能搭建一个个人博客(站点)。

其实搭好之后我也没有用这个个人站点放文章,单纯想把它装饰地很好看,就当搭建个人博客也是一次学习了。

为什么说不断跳坑。因为在输入各种指令的时候,很可能会不断地出现报错信息,然后要一条一条慢慢解决自己的问题。结果了很多次尝试之后,其实总共就那么几个步骤,能够清楚得知道了。(当然知识还是有很多要学的)

这里可以看看搭建的博客:
Goodric’Blogs
https://goodric.top

搭建是用 GitHub+hexo
那就开始搭建步骤把!
——
——

准备

第一步先下载好需要的工具(两个软件)

1、Nodejs
这里是官网:https://nodejs.org/en/
在这里插入图片描述
不过这里我踩了个坑,官网下载的似乎是最新版的14.x.x
由于版本过新,在很多指令输入的时候,总是会出现报错。
例如这样的报错警告:

$ (node:10816) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
bash: syntax error near unexpected token `Warning:'
(node:10816) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency

由于版本过新出现的错误是可以通过下载旧版本解决,比如下载 12.x.x 的版本。
然后我个人是比较习惯在其他的国内站点下载,一个没有什么不同,下载速度也可能更快。
比如脚本之家 、pc6 下载站等国内站点,搜索引擎搜索 nodejs 版本就能看到很多下载地址。

下载之后正常安装点下一步即可,软件还包含了 npm ,后面还要用到 npm 指令。
下载好后文件像这样:
在这里插入图片描述
——
2、Git
官网下载地址:https://www.git-scm.com/download/win
这里没什么,直接下载即可。
在这里插入图片描述
下载好之后的文件像这样:
在这里插入图片描述
并且安装好后在文件内或者桌面空白出点击鼠标右键可以看到多了这两个选项。
在这里插入图片描述
这个 Git 的作用就是把文件传到 GitHub 进行托管,除了在这里用到,要是在 GitHub 建什么项目都是需要用到的。

都安装好后可以测试一下。
打开 cmd 命令行输入:

git --version
node -v
npm -v

可以看到每个软件的版本号。
在这里插入图片描述
——
——

创建博客文件

接下来找一个地方创建一个文件,之后关于博客的一些配置都在这个文件里了。
比如我是在 E 盘创建的,命名为 Blogs ,命名工具自己即可。
进入该文件夹,点击右键,点击 Git Bash Here
在这里插入图片描述
输入: npm install -g hexo-cli ,为全局安装 Hexo ,到后面要用到 hexo 指令,Hexo 是我们博客的框架。
在这里插入图片描述
执行指令之后,如果出现这个报错是可以不用管的。这是因为多了一个文件产生的,这个文件是 mac 系统需要的,我们在 Windows系统的话不需要理会。
在这里插入图片描述
安装之后继续在这个命令行输入:hexo init ,给文件初始化,在文件部署 hexo 。
后面的指令都是在这个命令行里输入,即在目录 /e/Blogs 下输入。
在这里插入图片描述
执行了命令之后,文件夹里就自动生成了这些文件。
在这里插入图片描述
到这里,本地就已经有一个博客的雏形了。
同样在刚刚的命令行输入 :hexo s (hexo server 本地运行博客)
在这里插入图片描述
然后在浏览器输入 :localhost:4000 ,就可以看到我们的博客雏形了。
在这里插入图片描述
刚刚的命令行按 Ctrl+C 关闭本地预览。

hexo 的一些基本命令,基本都是用得到的:

hexo init : 初始化博客
hexo s (hexo server) :本地运行博客
hexo new “文章名字”:新建一篇文章
hexo clean :清理缓存
hexo g (hexo ):生成静态文件
hexo d (hexo deploy):部署到云端。

——
——

部署

接下来要做的就是把本地博客部署到 Github 上。
首先要有一个 GitHub 账号,官网:https://github.com/

左上角点击 new 创建一个仓库:
在这里插入图片描述
仓库名有固定的格式: <Github账号名称>.github.io

还有 GitHub 的账号名称最好不要含大写字母,保险起见怕不起作用。
下面的除了勾选 Public 其他的都可以不填。

我刚开始的时候既名字含大写字母,下面也添加了 README 文件,结果访问不到我的博客,而是访问那个 README 文件。(可能是我没有设置好)
在这里插入图片描述
仍然刚开始的命令行,输入:

npm install hexo-deployer-git --save

安装 hexo-deployer-git插件,让本地的 hexo 与 GitHub 链接。
在这里插入图片描述
添加 SSH key
命令行输入:

ssh-keygen -t rsa -C “邮箱地址”

一直按回车,出现选择,填 y 后再一直按回车。
在这里插入图片描述
然后进入 C:\Users\Administrator.ssh\id_rsa.pub
可以看到我们的 SSH 密钥。
在这里插入图片描述
把里面的内容全部复制,再到 GitHub 界面右上角点头像选择 Settings 。
在这里插入图片描述
在此处添加 SSH ,Title 随便填,key 框内就是填刚刚文件里的内容。
在这里插入图片描述
添加完之后测试一下是否添加成功。
命令行输入: ssh -T git@gtihub.com
可以看到 successfully 。
在这里插入图片描述
再进行配置邮箱和用户名:

git config --global user.email “你的邮箱”
git config --global user.name “github名称”

“ 你的邮箱 “ 即刚刚创建 ssh 的邮箱。
“github名称” 即你的 GitHub 账户的名字。

如图样式。输入即可,没有提示成功,但是不可缺少。
在这里插入图片描述

接下来配置文件。
进入我们的博客文件夹打开 _comfig.yml 。
在这里插入图片描述
在 _comfig.yml 文件里拉到最后,在 deploy 后面进行添加修改。
这里注意英文的冒号后面要加个空格在接内容。

deploy:
type: git
repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git branch: master

在这里插入图片描述

最后!
同样那个命令行依次执行以下内容:

hexo clean (非必要)
hexo g
hexo d

然后,打开浏览器输入:xxx.github.io 就可以看到最开始我们打开的本地博客的那个样子。
xxx 是 GitHub 的账号名称。

最基本的博客就算已经搭好了。
后期可以对自己的博客进行美化。
如换主题、换域名等等小美化小特性。
本人用的主题是 butterfly 。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Goodric

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值