0 基础搭建博客教程(一)
请注意,本文任何内容都只适用于 Windows 10 系统,其他系统不适用。
前言
搭建方式
使用 GitHub Pages 来搭建 Hexo 静态博客网站,其优点是完全免费,虽然搭建过程中有点折腾,但搭建完成后基本不用担心维护的事,本文就详细介绍下如何使用 Hexo + GitHub 搭建免费个人博客网站的教程。
什么是 GitHub Pages?
GitHub Pages 是 GitHub 提供的一项服务,允许用户免费托管静态网站或个人项目页面。它基于 Git 版本控制系统,使得用户能够直接从代码仓库中生成和发布网页内容。通过 GitHub Pages,用户可以将自己的项目展示给他人,无需自己购买服务器或域名,非常适合个人网站、项目文档、博客等使用。
——来自 ChatGPT
具体可看官网介绍,可用翻译插件看一下,打不开可以用steam++,具体使用看下文:About GitHub Pages
什么是 Hexo?
Hexo 是一个基于 Node.js 的博客框架,支持 Markdown、一键部署和插件扩展。Hexo 提供了 406 个美观、强大、可定制的主题,让你轻松创建自己的博客。
——来自官网介绍
准备工作
安装 Node.js
点我下载 Node.js,如图:
下载完成后打开,然后一路点 next
,最后点 Finish
。
安装 Git
点我下载 Git,下载速度可能特别慢,耐心等待。如图:
安装过程和 Node.js 一样,此处不再重复。
创建博客
安装 Hexo
新建存放博客的文件夹,然后在此文件夹中右键,点击Open Git Bash here
,意为打开 Bash ,如图:
请注意,除此以外,下文中所有运行命令的方法
都是这样操作的,除了判断成功的方式。
该方法只在这里介绍一次,以后不再重复。
然后在此页面中输入以下命令以安装Hexo:(直接复制粘贴,粘贴时在此窗口点击右键,点击 Paste
)
具体操作如下图:
1 | npm install -g hexo-cli |
然后回车(点击键盘上的Enter)运行即可。如出现错误,请自行上网查询查找解决方法(可以去CSDN搜,那里比较靠谱),每个人的问题不一样。
运行后出现类似于
这样的页面就安装成功了:
配置淘宝镜像源
由于众所周知的原因,使用 npm 访问一些资源时有时会遇到拒绝访问的情况。要解决这个问题,我们可以使用国内的淘宝镜像源。
直接运行此命令:
1 | npm config set registry https://registry.npmjs.org/ |
Hexo 初始化
继续在此窗口操作,运行这条命令:
1 | hexo init |
若运行结果的每一行均以’INFO’开头,则表明初始化完成。
安装 npm
继续在此窗口操作,运行这条命令:
1 | npm install |
博客预览
最后,运行这条命令,如果像下图一样没有报错,就可以在本地访问你的博客了,在浏览器输入http://localhost4000/
以预览博客,按 Ctrl + C 停止预览:
1 | hexo s |
可能你会感觉这个博客太简陋了,别急,一步一步来。
博客部署
我们先把博客部署到 Github上,之后再讲美化。
刚才你访问的博客只能在本地访问自己看到,还无法联网让其他人看到,现在我们就把博客部署(可以理解为上传)到 GitHub 上让其他人看到。
准备工作
下载 Watt Toolkit(原名 Steam++ )
能访问GitHub的可忽略此小节,不能访问的往下看。
既然搭建方式是使用 Github Pages 来搭建,那就必须能访问 Github,但是,部分地区可能会遇到不能访问 Github 的情况,本节的撰写就是为了帮助不能访问 Github 的人能正常访问 Github。
点我去官网下载,如有问题可点我去官网查看常见问题及解决方案。
下载安装完成后,打开它,点击左侧第二个闪电图标“网络加速”选项,滚轮往下滑找到并勾选 GitHub 选项,点击右上角 “一键加速
”,就可以访问 GitHub 了。
如图:
安装hexo-deployer-git
插件
不要忽略此小节!!!
这样才可以用命令把博客部署到 Github 上。
1 | npm install hexo-deployer-git --save |
注册 Github 账户
不能访问 GitHub 的,和本文2.1一样,并且在2.1的基础上多打一个“国外验证码平台”的勾,因为在注册 Github 时,需要完成人机验证,而人机验证有时可能加载不出来,所以要勾上这个。
进入 Github 页面,点击右上角的Sign-up
然后根据网页指引,填写你的邮箱,设置密码,剩下的怎么填都无所谓,但有一点要注意,你的 Github 用户名直接与你的域名挂钩!
当博客成功部署到 Github上时,会给你一个“XXXX.github.io
“域名,其中的XXXX就是你的 Github 用户名!
创建“仓库”
登录后,点击左边的绿色按钮create repository
,如果你已经有仓库了,就点绿色按钮new
这里要注意,仓库名字(Repository name)和用户名(Owner)必须一摸一样!且必须写成XXX.github.io样式,类型必须选择Public
(我这里已经建好了,才会出现报错)如下图:
完成后在页面最低端
点击绿色按钮Create repository
,这样仓库就建好了。
将 Github 仓库和本地文件关联起来
完成后,点击按钮ssh
,复制 SSH :
按照下列格式粘贴到博客站点配置文件你的博客文件夹/_config.yml
中,具体格式为:
1 | deploy: |
请注意,要把 repo 后面的“your ssh”更改为你刚才复制的 ssh!!!
接下来,开始建立联系,运行下列命令,一个一个来执行
:
请注意,要把下面的 “your Github name
” 和 “your Github email
“ (不包括引号)分别改成你自己的 Github 用户名和注册 Github 时所用的邮箱!!!
1 | git config --global user.name "your Github name" |
1 | git config --global user.email "your Github email" |
创建 SSH
还有个问题,虽然这样可以把博客部署到 Github 上了,但是每次部署都需要输入你的 GitHub 账户的
密码,否则就不能上传。想解决这个问题,就创建 SSH(别问这是什么,照做就行)。
新建 SSH key
,在cmd中
输入如下命令,注意大小写
:
请注意,要把下面的 “your email” (不包括引号)改成你注册 Github 时所用的邮箱!!!
1 | ssh-keygen -t rsa -C "your Email" |
然后出现:
1 | Generating public/private rsa key pair. |
这一步告诉你生成的 SSH 在哪里,下文中会用到
,直接回车即可。
然后出现:
1 | Enter passphrase (empty for no passphrase): |
这一步是要求你设置密码,这个密码会在部署博客到 Github 时(运行hexo d时)使用,可以直接回车,意为不设置密码。
然后出现:
1 | BASH |
意为密钥成功生成,关闭窗口。
在 Github 上添加 SSH key
打开本地文件:id_rsa.pub
(位置已在“创建 SSH”小节中介绍),直接打开复制。
然后登录 GitHub,点击右上角的头像
——Settings
——SSH and GPG keys
,具体流程见下图:
将刚才复制的内容粘贴在key文本框
里,title可以不填。
测试
在 cmd 运行此命令:
1 | ssh -T git@github.com |
如果提示:
1 | Are you sure you want to continue connecting (yes/no)? |
输入 yes 并回车。
像下图这样即为成功:
部署
然后就可以部署你的博客到 github 了,在 bash 运行此命令:
1 | hexo cl && hexo g && hexo d |
类似于图中这样的即为成功:
至此恭喜你,你已经有了一个简单的博客!接下来我将会介绍如何美化你自己的博客。
至此第一章结束,有什么问题也可以在评论区留言。当然,最好还是先上网查询解决方法,因为这是解决问题最快的方式,如果本文哪些地方有问题,欢迎指出。