test_my_site

Github+Hexo记录第一次配置Hexo

创建github个人仓库

首先登录个人GitHub账号,使用邮箱注册账号

点击GitHub中的New repository创建新仓库,仓库名称为:用户名.github.io(这个是固定写法)

比如我的就是: SunnyYANGyaya.github.io

安装Git

什么是Git ?简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。从Git官网下载:Download for Windows 现在的机子基本都是64位的,选择64位的安装包,下载后安装,在命令行里输入git测试是否安装成功,若安装失败,参看其他详细的Git安装教程。安装成功后,将你的Git与GitHub帐号绑定,在随便哪个目录下,鼠标右击打开Git Bash

Snipaste_2023-07-18_20-47-57

如果安装成功,接下来配置ssh秘钥文件:

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh秘钥文件:

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车,默认不需要设置密码

生成的.ssh文件在C盘用户文件夹.ssh文件夹里面,将id_rsa.pub秘钥中的内容全部复制

Snipaste_2023-07-18_20-53-13

然后打开settings_keys界面,新建new SSH Key

title随便写,把刚刚复制的sshkey粘贴到key中,key type为authentication Key(如果没有就不用选了),最后点击Add SSH key。

在Git Bash中检测GitHub公钥设置是否成功,输入 ssh git@github.com

Snipaste_2023-07-18_20-57-31

这样就是成功了

这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

安装Node.js

Hexo基于Node.js,Node.js下载地址:Download | Node.js 下载安装包,注意安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js是否安装成功,在命令行中输入 node -v 就可以检测node是否安装成功,这个,一般都是一直next就行

检测npm是否安装成功,在命令行中输入npm -v

到这了,安装Hexo的环境已经全部搭建完成。

安装Hexo

Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog或者myblog,Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后,进入文件夹中,按住shift键,右击鼠标点击命令行

使用npm命令安装Hexo,输入:

1
npm install -g hexo-cli 

安装最好翻墙,耐心等待,安装完成后就可以初始化我们的博客了,输入:(init后面要接自己创建的空文件夹的名字,不然没有反应)注意,这里的命令都是作用在刚刚创建的Blog文件夹中。

1
hexo init myblog

为了检测我们的网站雏形,分别按顺序输入以下三条命令:

1
2
3
4
5
hexo new test_my_site

hexo g

hexo s

这些命令在后面作介绍,完成后,打开浏览器输入地址:

localhost:4000

可以看出我们写出第一篇博客,只不过我下图是我修改过的配置,和你的显示不一样。

Snipaste_2023-07-18_21-04-33

现在来介绍常用的Hexo 命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n “我的博客” == hexo new “我的博客” #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

刚刚的三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。

推送网站

上面只是在本地预览,接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件,进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件

1
2
站点配置文件: \github-blog\blog-theme
主题配置文件: \github-blog\blog-theme\themes\landscape

下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后修改为:

deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径,记得加上 .git
branch:

master参考如下:

Snipaste_2023-07-18_21-08-17

保存站点配置文件。

其实就是给hexo d 这个命令做相应的配置,让hexo知道你要把blog部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。最后安装Git部署插件,输入命令:

1
npm install hexo-deployer-git --save

这时,我们分别输入三条命令:

1
2
3
hexo clean 
hexo g
hexo d

其实第三条的 hexo d 就是部署网站命令,d是deploy的缩写。完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io

你就会发现你的博客已经上线了,可以在网络上被访问了。

更换主题

如果你不喜欢Hexo默认的主题,可以更换不同的主题,主题传送门:Themes 我自己使用的是Next主题,可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题,在blog目录中(就是命令行的位置处于blog目录)打开命令行输入:

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开站点的_config.yml配置文件,修改主题为next

这个主题有中文文档,帮助小白理解

1
https://keep-docs.xpoet.cn/

在你这个博客的界面下,打开git Bash Here

1
git clone https://github.com/XPoet/hexo-theme-keep themes/keep

Keep 主题安装完成后,在 Hexo 配置文件 _config.yml 中将 theme 设置为 keep

Snipaste_2023-07-18_21-13-41

就可以了,如果想要修改更多,就参考帮助文档

发布文章

文章需要用markdown写,语法自己去网上找,用Typora或者obdsian编写

在命令行中输入:

1
hexo n "博客名字"

我们会发现在blog根目录下的source文件夹中的_post文件夹中多了一个 博客名字.md 文件,使用Markdown编辑器打开,就可以开始你的个人博客之旅了,

这是我的一篇博文内容示例:

Snipaste_2023-07-18_21-16-29

通过带有预览样式的Markdown编辑器实时预览书写的博文样式,也可以通过命令 hexo s –debug 在本地浏览器的localhost:4000 预览博文效果。写好博文并且样式无误后,通过hexo g、hexo d 生成、部署网页。随后可以在浏览器中输入域名浏览。

寻找图床

图床,当博文中有图片时,若是少量图片,可以直接把图片存放在source文件夹中,但这显然不合理的,因为图片会占据大量的存储的空间,加载的时候相对缓慢 ,这时考虑把博文里的图片上传到某一网站,然后获得外部链接,使用Markdown语法,**图片信息** 完成图片的插入,这种网站就被成为图床。

我用的这个

1
https://github.com/XPoet/picx

个性化设置

所谓的个性化设置就是根据个人需要添加不同的插件及功能

在站点配置文件_config.yml修改基本的站点信息

1
2
3
4
5
6
7
8
# Site
title: 我叫SunnyYang
subtitle: ''
description: ''
keywords:
author: SunnyYang
language: en
timezone: ''

依次是网站标题、副标题、网站描述、作者、网站头像外部链接、网站语言、时区等。

在主题配置文件_config.yml修改基本的主题信息,详细查看主题的帮助文档

参考链接:https://zhuanlan.zhihu.com/p/26625249?dark_mode=0

  • Copyright: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2023 SunnyYang
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信