Github-Hexo简单搭建

这几天由于团队下发了一个任务,需要搭建一个github-hexo个人博客。
第一次听到这个任务,你是不是有点懵,反正当时的我是特别懵。由于从没有搭建过一些东西,想着是不是特别有趣?于是在浓厚好奇心的驱使下,我开启了自学模式,学习一些大佬的搭建经验和讲解。总算在不懈努力的学习下,幸运的成功无踩坑搭建了我的github-hexo个人Blog。由此,我写下这篇blog,希望能帮助大家无踩坑快速搭建自己的个人blog。

一、准备搭建环境:

1.node.js的安装

在浏览器上搜索node.js,进入官网。出现两个下载板块,LTS长期支持版,Current为当前最新版。我下载的是LTS版本的,此时是v10.15.3。

nodejs里面的npm工具非常有用,可以在方便的安装一些插件。
下载地址
打开cmd命令行,成功页面如下

C:\Users\ASUS>D:    //注意你安装的路径,我所有的文件都安装在D盘上了,也可以安装在其他路径
D:\>node -v
v10.15.3
D:\>npm -v
6.4.1

2.Git的安装

在浏览器上搜索git for windows,进入官网,点击Dawnload进行下载。但一般下载有点问题,需要翻墙下载。是不是有点担心,别着急,你也可以点击右边这个网址下载地址下载,各种版本的都有哦!
安装步骤:一直next到下面这个页面

选择第二个,然后一路next。打开cmd命令行,成功页面如下

C:\Users\ASUS>D:
D:\>git version
git version 2.21.0.windows.1

二、Hexo的安装

前面配置搭建环境,看起来是不是特简单。如果此时你认为搭建很简单的话,那你就想错了,从此时开始需要注意了,困难正一步一步向你袭来。
创建文件夹,安装hexo
先创建一个用来存放所有博客的东西的文件夹,并重命名,我为了容易记,创建了一个名为blog的文件夹。进入该文件夹目录,鼠标右击,选择Git Bash Here进入命令行。

开始安装Hexo,安装命令npm install hexo-cli -g安装结束后,成功命令如下

    C:\Users\ASUS>D:
    D:\>cd blog
    D:\blog>hexo -v
    hexo-cli: 1.1.0
    os: Windows_NT 10.0.17134 win32 x64
    http_parser: 2.8.0
    node: 10.15.3
    v8: 6.8.275.32-node.51
    uv: 1.23.2
    zlib: 1.2.11
    ares: 1.15.0
    modules: 64
    nghttp2: 1.34.0
    napi: 3
    openssl: 1.1.0j
    icu: 62.1
    unicode: 11.0
    cldr: 33.1
    tz: 2018e

然后初始化
初始化命令:hexo init blog
初始化后打开,会出现下面这些文件:
node_modules:是依赖包
public:存放的是生成的页面
scaffolds:命令生成文章等的模板
source:用命令创建的各种文章
themes:主题
_config.yml:整个博客的配置信息
db.json:source解析所得到的
package.json:项目所需模块项目的配置信息
我可能操作有点问题,在blog目录下还有个qwzf文件夹,上述文件都在qwzf文件夹里,我记得我当时初始化的时候,执行的命令是hexo init qwzf 结果如下

三、Github的创建和配置

1.Github的创建

(1)注册账号

GitHub是一个面向开源及私有软件项目的托管平台,在第一次使用github,需要进行注册。 注册地址

(2)初始设置

提交注册信息后,会弹出一个界面,这里我们选择免费用户就可以了。默认的FREE后面Chosen按钮已经是选中状态了。

(3)验证账号

新建一个储存仓库
名称为yourname.github.io, 其中yourname是你的github名称,按照这个规则创建才有用,我的是 qwzf.github.io

发现邮箱地址未验证

登录注册时的邮箱,进行验证

2.新建仓库

在主页右上角,点击加号,找到New repository,点进去会显示如下界面,输入仓库名,点击创建

3.Github的配置

(1)配置github账户信息

回到cmd中,配置github账户信息(YourName和YourEail都替换成你自己的)

D:\blog\qwzf>git config --global user.email "YourEail"  //配置用户邮箱,和注册github的邮箱一致
D:\blog\qwzf>git config --global user.name "YourName"  //配置用户名,和注册github的用户名一致
(2)生成SSH密钥

打开Git Bash Here命令行,输入ssh-keygen -t rsa -C "你的邮箱"然后一直回车到结束,这样就成功在C盘用户个人目录生成了.ssh文件夹

打开.ssh文件夹,会出现两个文件,选择下方的那个文件,用记事本打开。会出现以下内容,全选复制

登录你的gihub账号,点击Your profile

然后点击Edit profile进入,选择SSH并新建一个SSH Key
其中Title中的名称可以任意填写,将C:\Users\Administrator.ssh目录下id_rsa.pub复制的所有内容粘贴到Key中,点击Add SSH Key,SSH密钥完成

可以在gitbash中验证是否添加成功:ssh -T git@github.com
问题:假如ssh-key配置失败,那么只要以下步骤就能完全解决

首先,清除所有的key-pair
ssh-add -D
rm -r ~/.ssh
删除你在github中的public-key

重新生成ssh密钥对
ssh-keygen -t rsa -C “xxx@xxx.com

接下来正常操作
在github上添加公钥public-key:
1、首先在你的终端运行 xclip -sel c ~/.ssh/id_rsa.pub将公钥内容复制到剪切板
2、在github上添加公钥时,直接复制即可
3、保存

测试:
在终端 ssh -T git@github.com

四、_config.yml文件的配置

看到上面的过程,是不是感到一些厌烦,别着急哦,到这一步,就离成功搭建,只剩一步之遥了。
用编辑器(我用的sublime Text)打开你的blog项目,修改_config.yml文件的一些配置:

url: https://qwzf.github.io
deploy:
  type: git
  repo: https://github.com/qwzf/qwzf.github.io.git
  branch: master

将qwzf换成你自己的用户名

五、本地预览和上传到Github

(1)本地预览

回到gitbash中,进入你的blog目录,分别执行以下命令:

hexo clean
hexo generate
hexo server

命令也可以简写成

hexo clean
hexo g
hexo s   

声明:hexo 3.0把服务器独立成单个模块,需要单独安装:npm i hexo-server
打开浏览器输入:http://localhost:4000 就可以在本地看到Hexo了
是不是有点兴奋,完成下面最后一步,就可以部署到github上喽!

(2)上传到Github

先安装:npm install hexo-deployer-git –save
(这样能将你写的文章部署到github服务器上并让别人浏览到)
执行命令(建议每次都按照如下步骤部署):

hexo clean   //清理缓存
hexo generate  //本地生成
hexo deploy   //提交到服务器

命令也可以简写成

hexo clean
hexo g
hexo d

注:deploy的过程中要输入你的username及passward
然后在浏览器中输入http://yourgithubname.github.io就可以看到你的个人博客啦。
感觉gitbash中东西太多的时候输入clear命令清空
命令简写
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 #清除缓存,若是网页正常情况下可以忽略这条命令

六、修改及配置主题

hexo初始化之后默认的主题是landscape , 然后你可以去这个 地址 里面找到你想要的主题,进行克隆。都有相关的介绍,next比较充分,但我觉得不太美观,就自己挑选了个精美主题进行配置修改,按着说明来就好了,反正一直改就完了!挑选结束后,可以将主题copy到themes目录,如

git clone https://github.com/HmyBmny/hexo-theme-concise.git themes/concise 

修改_config.yml中的theme:

theme: concise

所有的主题模板,共有的操作方式就只有这两个,但是不同的模板,会有很多不同的设置,这里就需要针对模板的使用说明进行修改了。建议通过github找到模板,看下readme。我觉的这个大佬的主题修改和配置可能会有点帮助, 链接地址

这便是我搭建Github-Hexo的过程,希望能用这篇blog,让大家少入坑,成功搭建属于自己的个人博客。教程千万条,避坑第一条。搭建不规范,入坑更容易。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 qwzf1024@qq.com

×

喜欢就点赞,疼爱就打赏