github博客突然无法访问_hexo框架搭建个人博客站点,手把手教学。

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-28 05:41   746   0

Python实战社群

Java实战社群

长按识别下方二维码,按需求添加

5caf33e6f2324ef3e0b5efed55ddccf5.png

扫码关注添加客服

进Python社群▲

a78a5dc079b70b1bc87f5381d8a62e8a.png

扫码关注添加客服

进Java社群

作者丨黎杜

来源丨非科班的科班

安装Node环境

首先我们在本机要安装Node环境,我们可以直接来到Node.js官网:https://nodejs.org/en/,直接点击下图下载。

1f0acdf64f527c65f10392071134f4bf.png

下载后,直接双击,然后就是一直下一步下一步的傻瓜式操作。这里要注意的是:有的人的电脑可能已经安装好Node环境,已经安装好的可以通过在cmd窗口执行下面的命令查看Node版本

node -v
1eff3d9ea91804c7fae6dbd5a662f9aa.png

若是在Node版本为10以下的要更新一下自己的Node版本,因为Node10以下版本的执行安装hexo的时候会报错,并且它会明确的提示你版本不匹配的报错信息

安装完后,再次检验一下cmd窗口分别输入输入下面两条命令:

node -v
npm -v

安装完Node环境后,就是安装Git,安装Git很简单,这里就直接略过了,在Git官网下载:https://git-scm.com/downloads,然后也是傻瓜式一步一步的操作。

安装hexo

首先,在自己的本地中新建一个文件夹用来存放hexo的代码,我这里就直接在E:\MyBlog下进行安装hexo

在E:\MyBlog目录下,右击打开Git Bash,接着在Gir Bash中执行:npm install -g hexo命令,当看到下图所示表示安装完成,第一次可能等的时间会比较长:

7860e5414bea270d296124b4099f30f4.png

接着在执行:hexo init,初始化hexo项目,实际是从github中拉取项目:

e2c70a61105254994f0762ce4a30144d.png

当hexo初始化完后,你就能看你当前目录下多出了很多有关hexo项目的文件:

bd8697619f4fd651cd3dee2756185a10.png

这些目录中,其中比较重要的文件和文件夹是:sourcethemes文件夹,以及_config.yml文件:

  1. source:该文件夹是存放我们自己文章的地方,文章存放在该目录下的_posts文件夹中。
  2. themes:用于存放博客的主题信息。
  3. _config.yml:是hexo博客的配置文件,很多配置信息都在这里面。

接下来执行:npm installhexo g,使用npm源安装所依赖的组件和编译生成静态页面

195ade1517fecc46f671ddab2887e536.png

执行完上面的命令后,你会发现项目多了一个public文件夹,该文件夹就是用于存放静态页面的地方,该文件夹下的静态页面都是根据配置文件动态生成的,所以只要修改配置文件_config.yml中的配置信息,就可以使生成的静态页面发生改变:

30252d484449f730e1830de77009fb3e.png

最后就是启动hexo,通过执行命令:hexo s,就会出现如下的页面:

84bf08aa0ed6d19d5c86f46bddb634fb.png

它已经明确的告诉你,访问本地4000端口,在浏览器输入:http://localhost:4000,若是出现了下面的页面说明本地搭建成功:

784793c6d34d07f2c362e952d26b4f67.png

我们现在能看到的就是hexo默认的主题,该主题信息存储在themes下的landscape文件夹中。

若是想要修改这个默认主题,比如上面图片中大大的Hexo字体,我们要修改为我们自己的博客名称,首先打开MyBlog目录下的配置文件_config.yml

d7ec087c0ef85cfd1c49459d472be579.png

在这个配置文件有很多的配置信息,我们可以先找到title以及author这两个字段修改形成我们自己的信息。

27d05f6f264c8433bf09258f07afcddc.png

接着执行:hexo cleanhexo ghexo clean:表示清除原来的缓存,它会直接把原来编译生成的静态文件夹public直接删除hexo g:又会再次根据配置文件生成静态页面

62f5a59b989e639a2f95f9accb6c2112.png

最后,我们再次启动项目(hexo s),访问http://localhost:4000

5713dec738730d2af58b7bda57961c56.png

我们Hello World的文章换成我们自己的文章,这个文章就是位于我们前面所讲的source/_posts文件夹下:

fc719b778bd31b3e8e5fb07c86976235.png

我们只要把这个md替换成我们自己文章的md就可以了,然后再依次执行下面三条命令:

hexo clean
hexo g
hexo s
7856a28ce83c7b902099d0ba9a63a513.png

下面我们来看看效果:

37a6549322640077818389e37bc28cf9.png

这样就好看很多,另外要注意的是要想在上图的右边红色框内显示提交的主题,要在你的文章内加入标题,它就会自动识别:

---
title: 我以为我对Mysql事务很熟,直到我遇到了阿里面试官
---

另外,蓝色框内的显示的提交的时间,点击可以跳转到提交的分类记录中:

ec4af86cbcec3dba8ee19bebf7f26afe.png
分类

但是,还是感觉这个主题很丑,这时候就要用到hexo官方的主题库:https://hexo.io/themes/ ,在这里可以选择自己预览自己的主题库:

2c33a988c30f3c447021d6b002604f24.png

这里我选择一个比较高大上(骚)的主题,点击红色框内就是预览该主题,点击蓝色框就会跳转到该主题的github源码地址。

若是想要使用该主题,必须要把该主题下载下来,首先点击蓝色框进入该主题的github地址,复制该github地址,然后需要执行下面的命令:

clone https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

它表示把主题源码下载到themes主题文件夹下的volantis文件夹下。下载完后,要修改MyBlog目录下的配置文件_config.yml中的下面字段的配置:

5afa11c22d07fc00e7704ffab90f3a6b.png

最后在执行hexo clean、hexo ghexo s命令,就可以在浏览器看到效果:

a32ead053c135016a23da2a378e20911.png
e46043c68063a278b60ace6b0b2107f0.png

是不是感觉瞬间高大上,牛逼了很多,这样一个自己博客逼格就出来了,不需要自己写界面和后台,所以直接使用hexo来搭建个人技术博客还是非常方便的,基本的需求都能满足。

此时。在本次部署好之后就可以将代码推向github仓库,但是在推向github之前,你的MyBlog文件夹必须与你的远程仓库相关联,这个关联的方法在这一篇[(一)深入浅出图解Git,入门到精通(保姆级教程)]已经讲过了,这里就不再做详细的赘述了,就是将你的本地的.ssh/id_rsa文件中的key复制到远程仓库中的SSH Keys

当你的本地仓库与远程仓库关联后,就在远程仓库创建一个如下图所示的仓库,仓库名必须是:你的用户名+".github.io"

2ee5016bfba8d0b6275a0281b52243f5.png

最后还要在MyBlog文件夹下的_config.yml配置文件中配置如下的信息:

00c5506b401e0696b487cf76c34639e1.png

这样子就可以使用下面四条命令,就可以将你本地的代码推向远程仓库了:

npm install hexo-deployer-git --save
hexo clean
hexo generate
hexo deploy

最后在你的浏览器输入:http://+"你的用户名"+.github.io,就可以访问你自己的个人博客了,例如我个人的博客站点是:http://liduchang.github.io,最后的效果:

f9a7248db4e6d60ca2074ade036f4ad5.png
3efc160445bd7b3606e43800fa160d06.png

到此,使用hexo框架搭建个人博客的教程就已经结束了,最后有一点要说明一下的是:除了MyBlog下的配置文件_config.yml文件可以修改,还有themes/volantis文件夹下的_config.yml配置文件也是可以修改的,这个可以自己去研究。

f6b8c93ec1db979a560da9e465834039.png

然后每次修改完,也是执行下面四条命令:

hexo clean
hexo g
hexo s
hexo d

我觉得主题信息可以选择比较简单的,因为都是基于配置信息进行配置的,假如太复杂的博客主题,你还要去它的github的源码地址中去研究它每一个配置字段的含义或者看他的注解,会花费大量的时间,我觉得没必要。

经过多用户的访问测试显示,有的人手机无法访问,有的人手机可以访问,有的人电脑无法访问,有的人电脑可以访问,具体原因不太清楚,若是有人知道原因的,可以在评论区告诉我原因,不甚感激。

最后说一句,你的面试官能不能看到你搭建的站点就得看命了,很可能访问不了,哈哈哈哈,好了这一期到这里就结束了,我们下一期见,欢迎访问我的个人站点:https://liduchang.github.io/

f2646ac826a56c2e2bdc9ffaaee3a465.gif
程序员专栏 扫码关注填加客服 长按识别下方二维码进群

9b90f41157ed79a9601c093ea5dbb79c.png

近期精彩内容推荐:

386805e069a3e0c36f3c1ff5178b463e.png 中美日印程序员收入对比

386805e069a3e0c36f3c1ff5178b463e.png 程序员 悲催的一天

386805e069a3e0c36f3c1ff5178b463e.png SringMVC从入门到源码,这一篇就够

386805e069a3e0c36f3c1ff5178b463e.png 10个Python可视化动图,用心且精美

a58fe64f20107772bf398b3022195156.png

b73b4a49e67018282bc16ec37a63ba96.png

在看点这里0dd6c71951ac4b7a28757e2cfcb99f02.gif好文分享给更多人↓↓

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP