使用Github+Hexo搭建个人博客 | No.1(使用伪造变造机动车驾驶证扣几分)

2023-10-01

花了几天时间搭建了一个自己的hexo博客,先附上链接,大家看看效果,欢迎各位来访:

Stupid bunny-笨小兔

前言

现在市面上的博客很多,如CSDN,博客园,简书等等,可以在博客上发表一些文章,大家共同努力学习,这里呢,给大家展示使用Github和Hexo来搭建静态个人博客。

静态网页简单来说就是设计者把页面的东西设计好了,只是发布上去,本地浏览器就能访问。而动态网页的内容都是依靠服务器来运行的。管理者发布文章的时候只需要进入后台发布就行,发布后想更改也非常容易。需要主机来存放网站的源码等数据。

首先,搭建本地服务器的个人博客是免费的,你可以直接用GitHub的域名,不需要买域名,也不需要买主机而且非常稳定。搭建出一个个人博客会让自己倍儿有成就感,能力的提升当然也不在话下。

一期教程是完不成的,后续会继续发布博客部署以及主题优化等…

下面我们开启由“小白”转向“博客大佬”的蜕变过程

Hexo简介

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

第一期教程分为两部分:

第一部分:hexo搭建的准备工作第二部分:hexo的初级搭建及基本配置

第一部分

hexo搭建的准备工作:安装Git安装Node.js1.安装Git

windows:到git官网Download git上下载,下载后单击右键会有一个Git Bash的命令行工具,以后就用这个工具来使用git。

选择自己对应的系统平台,我这里是用的Windows,点击下载,按照默认选项安装即可。

linux:对linux来说实在是太简单了,因为最早的git就是在linux上编写的,只需要一行代码

sudo apt-get install git2. 安装Node.js

Hexo是基于node.js编写的,所以需要安装一下Node.js和里面的npm工具。

windows:node.js选择LTS版本就行了。

Linux:

sudo apt-get install nodejs sudo apt-get install npm安装完成后,打开命令窗口检测一下:win+R

依次输入: (注意输入法在英文状态下)

node -v npm -v git --version

如果出现对应的版本号,那么表示本地环境搭建成功。

以上hexo的环境准备工作就完成了,下面的步骤中我们将使用git bash来敲命令行

第二部分

hexo的初级搭建及基本配置:1. GitHub注册GitHub官网:GitHub,打开GitHub官网,点击注册。注册自己的用户名,绑定邮箱等操作。选择免费的账户下面是一个GitHub对新手的调查,可以直接跳过 Skip this step之后GitHub会向你的注册邮箱发送验证,打开你的邮箱进行验证,显示红框内容表示验证通过,先不用着急新建仓库。这一步就到这结束。下面在桌面或者其他空白处,单击鼠标右键,点击Git Bash Here依次输入:git config --global user.name "你的GitHub用户名" git config --global user.email "你的GitHub邮箱"

可以用以下两条,检查一下你有没有输对:

git config user.name git config user.email输入:ssh-keygen -t rsa -C "你的GitHub邮箱"然后一路回车,创建SSH秘钥。这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。ssh:简单来讲,就是一个秘钥。其中,id_rsa.pub是公共秘钥,可以随便给别人看;id_rsa是你这台电脑的私人秘钥,不能给别人看的。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。进入下面路径,如果不显示的记得选择显示隐藏的项目。

路径: C: \用户\用户名\ .ssh用记事本打开id_rsa.pub文件,复制里面的内容。登录GitHub,进入setting。选择左边的SSH and GPG Keys选项,进行添加加密。点击New SSH Key进行添加。Title自己取名字,把刚才复制的秘钥粘贴到Key中,然后点击Add SSH Key添加完成。打开Git Bash,输入:ssh -T git@github.com

出现Are you sure……的时候输入yes回车。

最后显示Youve successfully……的时候表示连接成功。

2.创建GitHub Pages仓库

GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务,让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。可以把它理解为动态网站的主机。

打开GitHub,点击右上角加号,然后点击New repository新建GitHub Pages仓库。在Repository name中输入:用户名.github.ioDescription选填。勾选Initialize this repository with a README填好后点击Create repository。创建后默认启用HTTPS。博客的地址为:https://用户名.github.io这样GitHub仓库就创建完成了3.安装Hexo博客首先在电脑磁盘(自己选择想要存放博客程序,文件以及后续博客美化等文件的磁盘)中新建一个文件夹,我这里命名Blog-Hexo,路径中最好不要存在中文。新建后打开此文件,右键打开Git Bash Here进入git命令窗口 (之前打开的可以关闭了)注意:一定要在Blog-Hexo文件夹中打开命令行使用npm安装Hexo博客程序。输入:npm install -g hexo-cli

时间会有点长,耐心等待…

初始化和安装所需的组件。输入:hexo init初始化完成后安装组件。接着输入:npm install

这时候我们Blog-Hexo文件夹中就会生成一些目录文件:node_modules:依赖包

public:存放生成的页面

scaffolds:生成文章的一些模板

source:用来存放你的文章和图片等等

themes:主题文件夹,后面美化博客时会用到

_config.yml:博客的网站配置文件(太重要了!!!)Hexo博客初始化就完成了,下面我们启用本地服务器进行本地预览。继续在命令行输入:hexo g #生成静态页面继续输入:hexo s #启动预览

一会命令行将会看到http://localhost:4000,现在就可以使用浏览器本地预览了,注意预览时不要按到Ctrl+C停止预览。

打开浏览器,在地址栏中输入:

http://localhost:4000

此时就可以看到创建的个人博客主题了,这是Hexo的默认界面

那么,恭喜!本地博客安装成功了!

4.上传部署Github

前面我们只能通过4000端口进行预览,只能自己看到,别人是看不到的,所以我们做这一步的目的是:使其能够通过域名或者网站访问。

需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

首先Ctrl+c断开本地预览,接着输入:

npm install hexo-deployer-git --save在博客文件夹中打开网站配置文件_config.yml。(如果电脑上有写代码的编辑器就用编辑器打开,没有就用记事本打开。)

找到文件末尾,在此处加上下面的代码:

deploy: type: git repository: git@github.com:用户名/用户名.github.io.git branch: master

如图所示,记得保存退出!

然后在命令行依次输入:hexo g #即hexo generate,生成静态文章 hexo d #即hexo deploy,部署文章

注意deploy时可能要你输入username和password。

上传成功后我们就可以使用网址进行访问了。网址为:https://你的用户名.github.io

那么,到这里搭建及美化Hexo的第一期教程就结束咯。

希望可以帮助到大家,有不足之处望大家谅解。

下一期教程主要是教大家怎么在个人博客上发布文章,请敬请期待吧~~~

喜欢的话记得支持笨小兔哦,可以关注下微信公众号!