提示:该博客搭建教程适合纯新手,效果可查看bigdataxy.cc,快来拥有属于你的个人博客吧。后续还有主题配置与博客编写教程,记得关注点赞哦~
【博客搭建1】基本框架搭建
本博客站点利用hexo+github搭建,在此记录分享我是如何利用hexo+github一步步成功搭建静态博客,避免日后遗忘,且作为博客维护的参考指南,特此记录。同时也希望能帮助到需要的人。
安装基本软件工具
Node.js安装及环境配置
Node.js安装,首先点击如下链接进行安装包的安装,下载完成后,按照特别注明中的Node.js安装及环境配置进行操作,即可完成Node环境配置。
Git安装及配置
Node.js安装,首先点击如下链接进行安装包的安装,下载完成后,按照安装教程进行操作,即可完成Git安装。
检验上述工具是否安装成功
打开Windows+R输入cmd,进入cmd窗口,之后输入node -v
,检查node.js是否安装成功,出现如下版本号即安装成功。
![image-20220202143752125](https://s2.loli.net/2022/02/05/F3q4g1MKHoYt2UD.png)
之后,分别输入npm -v
、git --version
,进行检查,出现如下结果即安装完成。
![image-20220202144234010](https://s2.loli.net/2022/02/05/67ZBSpVTtJyfi21.png)
Hexo的安装与检验
安装Hexo,在自己认为合适的地方建了一个blog文件夹。然后通过命令行进入到该文件夹里面,确保路径简单且不要有中文。输入npm install hexo -g
,开始安装。
安装后,输入hexo -v检测是否安装成功,出现下图即为安装成功。
![image-20220202144926287](https://s2.loli.net/2022/02/02/e5gkXI2VYRmhiwb.png)
在blog文件下右键打开Git Bash Here,输入如下代码:hexo init #初始化hexo博客
,等待安装,若首次不成功,重复输入hexo init
再次初始化。出现INFO Start Blogging with Hexo!
即为安装成功。
在cmd中输入npm install
,安装所需要的组件。
之后在Git Bash中输入hexo g && hexo s
,生成本地服务器。进入如下网址localhost:4000:
![image-20220203140153270](https://s2.loli.net/2022/02/03/7aEFXugOqM6s9ev.png)
即可查看个人本地博客:
![](https://s2.loli.net/2022/02/03/bFS3ZcXI15xmluV.png)
注:如果页面一直无法跳转,那么可能端口被占用了。此时我们ctrl+c停止服务器,接着输入hexo server -p 端口号来改变端口号
连接Hexo与Github
Github建立项目
首先创建一个GitHub账号,创建完成后,进入账号主页面,点击左上角的new创建一个新的仓库。
![image-20220202152215098](https://s2.loli.net/2022/02/02/5TV6gj1y9OpZqwU.png)
进入编辑仓库页面后,编辑如下:
![image-20220202153026689](https://s2.loli.net/2022/02/02/X8qFxyPJT9WB4od.png)
- 编辑仓库名字,统一格式:xxx[^github注册名] .github.io,此处xxx一定要为github注册名
- 点击Add a README file
- 点击Create a license创建新的仓库
上述操作之后,该项目已经被部署到网络上,通过xxx.github.io
能够进行访问。
连接Hexo与Github
将Hexo与Github page练习起来,设置Git的user name和email。
首先在blog文件夹里面右键,点击Git Bash Here。分别输入如下代码,这里的用户名和邮箱改为自己的。
git config -global user.name "Bigdata-xy"
git config -global user.name "2456...@qq.com"
输入cd ~/.ssh,并输入ls进行查看。
![image-20221028203825116](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028203825116.png)
之后,再输入如下命令:
ssh-keygen -t rsa -C "邮件地址"
这里的邮件地址为申请GitHub的邮件地址。ssh密钥生成。
![image-20221028195743624](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028195743624.png)
连续三次回车,生成密钥,最后得到两个文件:id_rsa和id_rsa.pub
![image-20221028200324720](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028200324720.png)
接着输入eval “$(ssh-agent -s)”
,回车,添加密钥到ssh-agent
再输入ssh-add ~/.ssh/id_rsa
,回车,添加生成的SSH key到ssh-agent
接着登录Github,点击头像下的settings,点击new ssh key新建钥匙,名字随意输入,key栏粘贴之前在id_rsa.pub中的代码。
![image-20220203133656534](https://s2.loli.net/2022/02/05/cAKCRgFt2jOJXqV.png)
在.ssh路径下输入cat id_rsa.pub
可查看并复制上述key所需的内容。
![image-20221028201020894](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028201020894.png)
输入ssh -T git@github.com
,测试添加ssh是否成功,如果看到Hi后面接你的用户名,即为成功。
![image-20221028201355298](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028201355298.png)
修改Deployment值
在blog文件中找到**_config.yml**文件,修改Deployment值(在末尾),将
deploy:
type:
更改为:
deploy:
type: git
repository: git@github.com:xxxx/xxxx.github.io.git
branch: master
repository值是你在github项目里的https(右下角)
![image-20221028204347688](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028204347688.png)
完成建站并新建博客
新建一篇博客,在blog文件下右键Git Bash Here,输入hexo new "博客名"
,你就可以在blog/source/_posts中找到已创建的文件。或者你直接在上述路径下创建md文件编写一篇新博客。Markdown文件的编写方式留个坑,之后有时间再写。
在生成以及部署文章之前,需要安装一个扩展,在Git中输入npm install hexo-deployer-git —save
,并将刚刚生成的文件编辑好后输入hexo g && hexo d
即可生成部署文章。
至此,一个具备基础功能的博客就完成了,可以通过用户名.github.io
进行访问。
绑定自己的域名
这部分可有可无,域名可增加博客的个性化。
购买域名
国内的域名服务商有新网,腾讯云,还有阿里云的万网等。下面以阿里云的万网为例: 在万网购买了自己心仪的域名后,进入阿里云的管理控制台-域名与网站-域名就可以看到购买的域名此时的域名状态是未实名认证的,然后就是实名认证(一般需要2小时左右)。
域名解析
首先获取自己 github 的二级域名的 IP地址,windows 下直接在 cmd 里 Ping 一下自己的博客就会得到 IP 地址:
ping username.github.io
,其中username为自己的github用户名
下面通过 DNS域名解析将购买的域名指向 github 的二级域名:username.github.io,进入阿里云的管理控制台-域名与网站-云解析 DNS,进入域名的解析设置,点击新手指导,将得到的 IP 地址填到记录值一栏,点击确定就 OK 了。填完以后的解析列表会出现:
![image-20221028210944911](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028210944911.png)
设置CNAME
在本地hexo 项目下,source 文件夹下面创建 CNAME 文件(没有后缀名的),在里面写上购买的域名。比如:
在 github 上面,打开 username.github.io 项目的(Settings)设置,然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如:
![image-20221028211212747](https://raw.githubusercontent.com/Bigdata-xy/cdn/main/img/article_content/image-20221028211212747.png)
这样新域名配置完成,可以使用新的网名访问自己的博客了
至此,博客的基本框架搭建完成,在博客搭建2、3中会分别介绍【Sakura主题的配置】及【Sakura主题下博客的编写操作】,使得个人博客更具特殊。