网站与博客部署全记录

hexo+git

— 博客,音译,英文名为Blogger,它的正式名称为网络日记;是使用特定的软件,在网络上出版、发表和张贴个人文章的人,或者是一种通常由个人管理、不定期张贴新的文章的网站。博客是继MSN、BBS、ICQ之后出现的第4种网络交流方式,是网络时代的个人“读者文摘”,它代表着新的生活、工作和学习方式。

— 在本人搭建博客的过程中,发现互联网上的教程大多数的发布时间是几年甚至十几年之前,有些软件的版本和操作方式都已经有所改变。许多新手小白如果按照之前的教程来操作的话会产生各种各样的问题。教程中所使用的专业名词也会使小白们一头雾水,影响操作效率。

— 于是在2021年4月10日发布了这篇面向纯新手小白的保姆级搭建教程,手把手教你搭建属于自己的个人博客

— 教程步骤框架来自hojun.cn发布的教程,使用工具包含node.js、github、gitforwin、Git、sublime、Hexo侵删

node的下载与安装

① Node.js官网下载并打开安装包

② 更改安装位置

③ 是否安装必要的环境,我选的安装

④ 安装完成

⑤ Win+R打开运行窗口,输入cmd

⑥ node -v查看版本

github注册

① 打开github官网 GitHub: Where the world builds software · GitHub

② 右上角注册

③ 注册流程走完后回首页,右上角加号第一个选项,传建一个新的存储库

④ 存储库名称为 用户名+.github+.io,其他默认,创建

gitforwin的下载与安装

① 浏览器输入 Git for Windows,下载gitforwin安装包

② 安装git

③ 更改安装位置

④ 创建开始菜单快捷方式,随意,我选择不创建

⑤ 点下一步全部默认就可以,到这一步选择第二个

⑥ 安装完成

⑦ 桌面没有新的快捷方式不要慌,正常现象,有需要的话可以在开始菜单和软件安装路径里找到并创建快捷方式

⑧ 验证是否安装完成 Win+R,输入cmd,输入命令git

githubSHH配置

① 打开git的安装路径,找到git bash.exe 双击运行

② 输入命令ssh-keygen -t rsa -C “991270685@qq.com“,引号内是github注册邮箱地址,回车

③ 无特殊提示就回车,有(y/n)就输入y回车

④ 打开github,点击右上角头像选择 设置

⑤ 选择shh和密钥选项,添加新密钥

⑥ 标题就用户名+tech吧(tech技术),填到第一栏

在C盘找到id_rsa.pub这个文件,以记事本形式打开,复制内容填到第二栏

⑦ 提交,创建完成

hexo的本地使用

① 浏览器输入 Hexo 进入hexo官网

② 在合适的位置新建一个文件夹blog,关于博客的文件基本都在这里面,我选择D盘根目录

③ 进入bolg文件,点击路径输入cmd,回车进入(也可以win+R,输入cmd,再用cd命令一级一级切到blog文件下)

④ 回到hexo官网,复制命令 npm install hexo-cli -g 到运行窗口回车

⑤ 网站下拉会有使用命令行,blog为你的博客名

⑥ 输入 hexo init +博客名 回车运行

⑦ 输入命令cd 博客名,进入博客文件,回到网站复制命令行 npm install 并运行

⑧ 完成后输入命令 hexo s 生成本地预览,最后会生成一个4000端口的网址,复制到浏览器进入,就能看到我们的博客了

sublime的下载与安装

① 浏览器输入Download - Sublime Text 进去官网下载,选择自己的系统,我选择windows64位

② 下载完成运行,更改安装路径

③ 默认选项就可以,一直下一步。安装完成

④ 打开sublime

⑤ 打开sublime,在左边栏source——-posts —— hello-world.md中输入文字,ctrl+s保存

⑥ 在blog路径中右击运行git bash,输入命令hexo cl清理缓存,hexo g hexo s生成本地预览

⑦ 浏览器打开本地预览,更改已生效

将hexo发布至github

① 打开浏览器,进入github之前新建的存储库,进入库,复制地址

② 在sublime中打开-config.yml文件更改配置信息

更改参数 author:名字,我的是maohuifei

更改参数 ur1: 后面为github存储库的地址中的一部分(XXXX.github.io)

更改参数 type:git,

添加新参数 branch: gh-pages

添加新参数 repo:后面为github存储库的地址

保存

③ 进入hexo一键部署网站部署 | Hexo ,复制hexo-deployer-git的安装命令 npm install hexo-deployer-git –save 进入git bash 运行安装

④ 命令 hexo cl 清理hexo g生成 hexo d提交

⑤ 浏览器输入 用户名+github.Io 我的是maohuifei.github.io

⑥ 博客搭建完成!

hexo主题的使用

① 进入hexo主题官网Themes | Hexo 选择主题,以next为例

② 进入主题详情,有详细安装步骤教程,每个主题进入位置不同

matery主题

全局css样式修改

css文件地址路径themes/hexo-thieme-matery/source/css/matery.css

新建文章配置

配置选项 默认值 描述
title Markdown 的文件标题 文章标题,强烈建议填写此选项
date 文件创建时的日期时间 发布时间,强烈建议填写此选项,且最好保证全局唯一
author 根 _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.
top true 推荐文章(文章是否置顶),如果 top 值为 true,则会作为首页推荐文章
cover false v1.0.2版本新增,表示该文章是否需要加入到首页轮播封面中
coverImg 无 v1.0.2版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片
password 无 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持 ,本文章是否开启 mathjax,且需要在主题的 _config.yml 文件中也需要开启才行
summary 无 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories 无 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类
tags 无 文章标签,一篇文章可以多个标签

默认配置文件路径:

根目录/scaffolds/post

Hugo