IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> github+git+hexo-matery博客搭建(详细教程) -> 正文阅读

[开发工具]github+git+hexo-matery博客搭建(详细教程)


我的个性化博客: http://xiaolan1.icu




一、创建github账号

有github账号和使用经历的可直接跳过

首先进入github官网 https://github.com/

注意:github可能需要梯子进入,要不然可能进不去
在这里插入图片描述

Sign up 创建账号,跟着步骤注册即可,注册完登陆,登陆后,进入在这里插入图片描述第二个,你的仓库,

在这里插入图片描述NEW 一个新的存储库

注意:在这里插入图片描述名称填写: 你的用户名.github.io

填写完在最下面点在这里插入图片描述创建即可

接下来你就可以输入 你的用户名.github.io来访问你的页面啦,虽然这网址有点怪,我们后续可以给他匹配域名

二、安装git并绑定github账号

1、安装git

进入git官网https://git-scm.com/在这里插入图片描述下载git,默认安装

在这里插入图片描述安装完成后,在桌面右击在这里插入图片描述出现红色框内表示安装成功

2、绑定github账号

绑定git与github账号,方便以后往github账号中上传文件更简单

1.添加ssh key

在这里插入图片描述进入settings,点击在这里插入图片描述再点击在这里插入图片描述 打开前面下载的git,在里面输入

ssh-keygen -t rsa -C "xxxx@xxx.com" 

双引号中为你的github账号邮箱,执行完成后,打开生成的ssh key文件 id_rsa.pub,仿照我的文件目录 在这里插入图片描述

复制id_rsa.pub文件中的内容,为你的秘钥,把内容粘贴到前面打开的New SSH key中的 key中,Title随便填

2.验证ssh key是否添加成功

输入

在这里插入图片描述

在下面提示的消息中输入前面设置的密码,输入的时候你看不到,出现下面这种消息表示添加成功在这里插入图片描述

3.设置username和email

在git 中输入

git config --global user.name "你的用户名"
git config --global user.email "你的用户名邮箱"

就好了,这里提交文件用下面hexo的命令,如需git命令提交文件,则请看git标签中,git提交文章

三、使用hexo来进行博客搭建

1、安装node

进入node官网下载https://nodejs.org/en/ ,然后默认安装

安装完成后,打开cmd检验是否安装成功,win+R 输入图片内容在这里插入图片描述

则安装成功

2、安装hexo并初始化hexo

在D盘中新建一个文件夹为Blog,打开Blog,右键打开Git Bash Here ,输入

npm install -g hexo cli

安装完成后,输入以下命令初始化博客

hexo init

输入下列命令进行静态部署:

hexo g

部署完成后,输入以下命令可以查看到:

在这里插入图片描述

按住Ctrl 点击localhost:4000可以打开这个网站,此时出现以下这个界面,表示hexo初始化成功

在这里插入图片描述

想要关闭命令按: ctrl + c 为停止运行

3、将hexo部署到GitHub

此时你生成的文件只能在你的电脑中运行,其他用户看不到,需要把Blog中的文件上传的github上。

在这里插入图片描述在Blog中找到_config.yml右击 在打开方式中用 记事本打开,拉到文件底部,填写以下内容:

deploy:
  type: git
  repository: https://github.com/1417847538/1417847538.github.io.git  #你的仓库地址
  branch: master

注意空格!冒号后面有一个空格 你的仓库地址为code下面的第一行网址,复制下来,粘上去即可

在这里插入图片描述
回到Blog文件中,右击打开Git Bash 输入命令:

npm install hexo-deployer-git --save

等待安装完成后,分别输入:

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件,并部署到设定的仓库(hexo deploy 的缩写)

完成后,输入你的 你的用户名.github.io 就可以打开你的网页看到以下这个界面了在这里插入图片描述

四、配置hexo主题(matery)

hexo中有很多的主题样式,我们在github中搜索hexo主题,或者进入hexo主题官网 https://hexo.io/themes/ 都能选择一款自己喜欢的主题作为自己的博客框架

这里我选择的matery主题 首先进入https://github.com/blinkfox/hexo-theme-matery/tree/master 下载这个主题,下载完成后解压到文件夹

在这里插入图片描述

在自己Blog文件夹中建一个名为theme的文件夹在这里插入图片描述把刚刚解压的hexo-theme-matery文件复制到theme文件夹中,打开Blog下的_config.yml文件夹,更改#Site下的内容,例如在这里插入图片描述

注意:冒号后有一个空格!

然后换上你的主题,找到如下内容在这里插入图片描述

在theme中换上你前面解压的主题名,我这里为hexo-theme-matery,填写完成后保存,打开Git Bash ,输入

hexo clean  #清除缓存文件 db.json 和已生成的静态文件 public
hexo g      #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d      #自动生成网站静态文件,并部署到设定的仓库(hexo deploy 的缩写)

就将自己当前更换的主题文件上传到自己的github中了。

一个调试技巧:在更改Blog内容时,可以在Git Bash 中输入 hexo s 打开http:后的网址,进行实时页面更改后的查看在这里插入图片描述
以后每次更改完Blog文件中的内容以及确认后,都可以输入hexo clean && hexo g -d 进行文件上传。

五、个性化matery主题,以及我在配置中出现的问题—进阶

1、个性化matery主题

具体可以参考hexo-theme-matery文件夹下的这两个文件,上面为英文版,下面为中文版[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述里面的内容在这里遍不过多介绍,照着做就好

2、我在配置中出现的问题

1.主题下的_config.yml

首先要浏览主题下的(也就是hexo-theme-matery)的_config.yml文件,里面都有相应的中文内容介绍,一开始最好浏览一遍,进行你想要的更改

2.二级菜单的使用

如果你想要使用二级菜单,你可以在想用的一级标签下按如下方式输入children里的内容在这里插入图片描述注意children以及里面内容放的位置

3.music的使用

这里配置完music里的内容后,有一点要注意[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

id必须为自己创建的歌单的id,不能是例如 网易云中我喜欢的音乐的id,这个id好像通常为10位,而我喜欢的音乐id为9位,就这个原因,我折腾近3个小时,希望大家避雷

4.valine留言模块

这是个所有人都可以留言的评论模块,具体可参考 https://valine.js.org/quickstart.html

关于leanCloud的使用

目前我掌握的是管理所有人的留言,在对应的以下选择中可以看见评论内容,然后可以进行选择性删除。

在这里插入图片描述

5.gitalk留言模块

gitalk和gitment,我在网上查阅,大家建议使用gitalk评论模块,使用建议参考

https://segmentfault.com/a/1190000018072952

注意:找到gitalk.ejs文件在这里插入图片描述,其中id必须填写,这就要你先前往github中使用issue,避雷!

在这里插入图片描述

这里必须给issue设置标签,第一个默认必须为Gitalk,第二个为你设置的id名,跟gitalk.ejs文件中id名匹配,才能在页面中显示gitalk留言模块,这里大概折腾2小时。

疑问望大佬给予回答:关于github登陆443问题在这里插入图片描述

这个评论目前只能进入github找到我的github.io仓库下具体issue内容中进行评论,而不能在页面中直接进行评论。

6.新建文章以及推荐文章设置

我们所写的文章都在_posts文件夹下在这里插入图片描述

如果想要新建文章,可以在这个文件夹下新建 xxx.md文件,xxx为英文名,内容随便写,建议语义化文章标题,以后方便修改。

里面的内容配置具体参考 主题文档中的在这里插入图片描述
按示例可进行配置

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2021-09-29 10:30:38  更:2021-09-29 10:32:53 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/23 9:33:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计