hexo+GitHub部署个人博客


Hexo+Github博客搭建

[toc]

1. 安装node.js

去官网下载64位安装包 -> 传送门
一路next
安装好之后进入命令提示符输入node -v、npm -v 如果出现版本号那么我们就安装成功了。
1585724500972.jpg
如果没有出现版本号,可能是没有配置环境变量的原因
计算机 —> 属性 —> 环境变量
1585724348653.jpg
选择Path,然后点击编辑
1585724411792.jpg
1585724475553(1).jpg

2.安装Git

去官网下载即可 -> 传送门
!1585724868501.jpg
安装后输入git –version 出现版本号即为安装成功,关于环境变量配置方法跟node.js一样

3.准备一个GitHub账号

传送门
1585725045329.jpg
新建一个项目:
1585725142759.jpg
然后如下图所示,输入自己的项目名字,README初始化也要勾上。
1585725302756.jpg

打开设置:
1585725426980.jpg
我们可以选一个主题样式
点击上方链接我们就进入到了我们的页面中
1585725539494.jpg

4.安装Hexo

自己找一个空余磁盘,我用的是我电脑里的E盘,新建一个www网站根目录文件夹
1585725693532.jpg
然后在www文件夹中建立我们的网页存放文件夹
1585725764694.jpg
进入到该文件夹内,点击右键Git Bash Here
输入:

npm i hexo-cli -g

1585726008594.jpg
安装完后输入hexo -v验证是否安装成功。
如果安装错误:
目前国内npm源有问题;所以键入如下代码即可安装成功:

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g

需要重新打开才可安装
1585726927514.jpg
出现下面信息说明我们安装成功
然后就要初始化我们的网站,输入hexo init初始化文件夹
1585727004746.jpg
这样本地的网站配置也弄好啦,输入hexo g生成静态网页,然后输入hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以看到我们的博客啦,效果如下:
1585727133042.jpg
按ctrl+c关闭本地服务器。

5. 链接GitHub

设置你github的名字和邮箱

git config --global user.name "EzioEcho"
git config --global user.email "wpx1007047653@gmail.com"

1585727271573.jpg
然后生成密钥SSH key:
在你头向下点击settings
1585727446292.jpg
找到SSH and GPG keys
1585727469325.jpg
新建一个SSH,名字随便起
然后回到GitBash
输入

ssh-keygen -t rsa -C "wpx1007047653@gmail.com"

1585727693954.jpg
我们可以看到公钥保存到这个路径下了
然后我们输入

cat ~/.ssh/id_rsa.pub

就会出现我们的密钥,然后复制到GitHub中

1585727817898.jpg
然后点击add SSH key

1585727825623.jpg

然后就可以看到我们创建的密钥了

1585727877810.jpg

回到gitbash
输入

ssh -T git@github.com

如果如下图所示,出现你的用户名,那就成功了。
1585728115352.jpg
刚创建可能会连不上,多试几次就好了
1585728153459.jpg
然后下面我们要改一下博客的配置找到博客根目录下的_config.yml文件,这个是博客的配置文件,在这里你可以修改与博客相关的各种信息。
1585728263993.jpg
拉到最后,修改为:

deploy:
  type: git
  repository: https://github.com/EzioEcho/ryanBlog.github.io.git
  branch: master

然后需要安装一下npm i hexo-deployer-git扩展,开始上传三连

  • hexo clean
  • hexo g
  • hexo d
    然后就可以去你的页面
    1585731067735.jpg
    但是发现好像CSS走丢了
    解决办法:
  • 没绑定域名
  1. 修改hexo中 _config.yml 文件:
    将url:/ 修改为 url: http://xxx.guithub.io 。即 在后面加上Github 主页的仓库名 然后修改root文件目录为 root: /你的项目名
    1585731982311.jpg
    再次打开
    1585731996323.jpg
    发现样式已经好了
  • 绑定域名是不会出现这个问题的,但是也要修改一下URL
    关于绑定域名:
    首先我们先ping一下 :ping xxx.github.io
    xxx指的是你的GitHub用户名
    1585803439870.jpg
    然后再解析域名,添加一条A记录,指向这个ping到的IP
    这时候你的仓库项目文件夹就会多出一个CNAME文件
    然后打开项目设置:
    1585803590087.jpg
    在Custom domain添加你的域名
    然后在你hexo文件的根目录中的_config.yml修改URL,root项就选到根目录就行
    1585803699279.jpg

关于hexo的一些命令
hexo new “postName” //新建文章
hexo new page “pageName” //新建页面
hexo g //生成静态页面至public目录
hexo server //开启预览访问端口(默认端口4000,’ctrl + c’关闭server)简写为 hexo s
hexo deploy //将.deploy目录部署到GitHub 简写 hexo d

备份博客源文件
有时候我们想换一台电脑继续写博客,这时候就可以将博客目录下的所有源文件都上传到github上面。
首先在github博客仓库下新建一个分支hexo,然后git clone到本地,把.git文件夹拿出来,放在博客根目录下。
然后git branch -b hexo切换到hexo分支,然后git add .,然后git commit -m “xxx”,最后git push origin hexo提交就行了。


文章作者: Ryan
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Ryan !
评论
 上一篇
VMware 安装 ArchLinux VMware 安装 ArchLinux
VMware 安装 ArchLinux1.去官网下载ArchLinux下载链接:https://www.archlinux.org/download/ 2.新建虚拟机) 下载的时候注意内核版本 到这一步,先不要打开虚拟机,我们还要改
2020-04-02
下一篇 
Hello World Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hex
2020-04-01 Ryan
  目录