当前位置: 移动技术网 > IT编程>开发语言>其他编程 > 使用-hexo-github-搭建免费个人博客教程

使用-hexo-github-搭建免费个人博客教程

2020年10月24日  | 移动技术网IT编程  | 我要评论
前言:最近也没学啥新东西,恰巧看到学长在搭自己的博客,然后兴趣使来,就也想整一个简单的个人博客,然后由于种种原因,这个过程进行的并不是那么的顺利,于是就有了这篇博客,借此记录也希望观者能顺利的搭建属于自己的个人博客。(PS:今天刚整明白搭博客,还没搞明白图片的插入以及美化排版啥的,先将就着看看hh)一、借助Github搭建博客借助Github搭建博客有许多优点,1.无需自己搭建服务器(零成本!)2.可以绑定自己的域名(虽然不是广义上的私人订制)3.使用标记语言,比如Markdown  当然

前言:

最近也没学啥新东西,恰巧看到学长在搭自己的博客,然后兴趣使来,就也想整一个简单的个人博客,然后由于种种原因,这个过程进行的并不是那么的顺利,于是就有了这篇博客,借此记录也希望观者能顺利的搭建属于自己的个人博客。
(PS:今天刚整明白搭博客,还没搞明白图片的插入以及美化排版啥的,先将就着看看hh)

一、借助Github搭建博客

借助Github搭建博客有许多优点,
1.无需自己搭建服务器(零成本!)
2.可以绑定自己的域名(虽然不是广义上的私人订制)
3.使用标记语言,比如Markdown
  当然由于是零成本、纯白嫖,肯定限制也是不少的,比如做出来的博客是静态网页,然后由于是基于GIT来对博客进行操作,很多东西都得靠命令来实现,但是总的来说用来搭建个人博客还是极好的选择。下面来正经介绍操作流程:
1.注册一个Github账号,这没啥好说的
2.创建一个仓库,仓库名为 你注册时的用户名(不是昵称).github.io ,将来你的个人博客的域名就是这个了,是不是很简单
3.仓库创建成功后可能会有延迟,也就是可能得等一段时间才能生效

二、搭建Hexo

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。在Hexo上面有许多现成的个人博客网站模板,安装部署完成后我们可以直接使用,也可以对其进行个性化的改造。Hexo的搭建步骤相比Github的操作复杂了许多,也就是它让我摸索了很长时间,然后可能是由于版本更新,导致网上的老教程都不太靠谱(至少对我来说挺坑的…),然后下面来详细介绍一下搭建步骤,建议在安装过程中关闭杀毒软件,因为会导致某些操作无法成功:

1.安装Git
2.安装Nodejs
3.安装Hexo

1.安装Git

到官网下载Githttps://git-scm.com/downloads.安装的时候一路点击Next就行,因为我也不知道都是些啥…反正默认就对了hh

2.安装Nodejs

这玩意和第三步的网上教程坑死我了… whatever,首先还是先去官网把它下载下来https://nodejs.org/zh-cn/.然后安装为了防止后面出现乱七八糟的错误还是推荐默认选项,安装位置它要c盘就c盘吧,c盘应该也不缺这么点空间。
  安装完成后,键盘同时按住(WIN+R)呼出运行,输入cmd运行命令提示符,然后输入node -v,如果正常显示版本号既nodejs安装成功,再输入npm -v,同理显示版本号即可。关于npm,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西,新版的nodejs自带npm,安装时两者一起安装。
  到此剩下的步骤就是和网上的教程区别最大的地方,根据我一下午的尝试,安装时nodejs会自动在D盘创建一个叫NodeJS的文件夹,里面包括node_global和node_cache这两个子文件夹,(而如果按照网上的教程这两个文件夹需要你自己可选创建,然后还要设置一堆乱七八糟的东西),接下来我们需要设置电脑的环境变量,基本步骤是右键计算机,选择属性,选择左边的高级系统设置,选择环境变量。这里我们应该是需要设置两个地方就行,第一个是上面的用户变量,双击path进入编辑,将带AppData\Roaming\npm的这一行删除,替换为D:\NodeJS\node_global,点击确定即可,第二个是下面的系统变量,新建一个NODE_PATH,然后在下面那行输入D:\NodeJS\node_global\node_modules,点击确定即可。

3.安装Hexo

鼠标右键点击桌面,如果Git安装成功的话右键菜单中会多出两个选项,选择其中的Git Bash,然后再出现的窗口中输入npm install hexo-cli -g,敲回车,然后在电脑的某个地方新建一个名为hexo的文件夹(名字和位置都随意),但是由于这个文件夹将来就作为你存放网站相关代码的地方,所以最好不要随便放。右键这个文件夹,同样选择Git Bash,输入hexo init,回车,hexo会自动下载一些文件到这个目录,然后我们再打开电脑的环境变量,在下面的系统变量中找到path,双击进入,添加新的一行内容为D:\NodeJS\node_global\node_modules\hexo\bin,然后我们可以在hexo中输入hexo -v,查看版本号同上,然后我们可以输入hexo -g,回车,再输入hexo -s,回车,执行以上命令之后打开浏览器访问 http://localhost:4000 即可看到hexo为我们提供的默认页面。

三、将我们的个人博客上传到Github

此时我们的博客还是存放在本地的,我们如果想能通过我们在第一步获取到的域名访问到该博客,还需将其上传到Github,如果你一切都配置好了,发布上传很容易,在Git Bash中一句hexo d就搞定了,当然关键还是你要把所有东西配置好。
  首先我们需要配置ssh Key,在Git Bash中输入cd ~/.ssh,如果提示:No such file or directory 说明我们是第一次使用Git,表示正常,然后我们再输入$ ssh-keygen -t rsa -C “你在Github上注册时使用的邮箱地址”,然后git会输出:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):

这两句话,敲回车就好,再然后系统会要你输入密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。我输入密码时好像看不到输入了啥…应该两次输的一样就行。最后看到一个框框中间一堆符号就说明成功设置ssh key了。
  接下里我们需要将ssh Key添加到Github,在类似于C:\Users\16875.ssh的文件夹中你会看到一个id_rsa.pub文件,用记事本将其打开复制其中的所有内容,如果看不到这个文件,你可能需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。然后登陆Github,点击右上角的 Account Settings—->SSH Public keys —-> add another public keys,把你本地生成的密钥复制到里面(key文本框中), 点击 add key 就ok了。
 接下来我们可以测试一下设置是否成功,在Git Bash中输入$ ssh -T git@github.com,如果响应以下内容:

The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

接着输入yes,然后你就会看到一条确认成功的语句。
  最后,我们还需要完善我们的个人信息,Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你在Github上注册时的,名字注意不是昵称是用户名。

$ git config --global user.name “C-0-RE”//用户名
$ git config --global user.email “C-0-RE@gmail.com”//填写自己的邮箱

到此ssh Key配置就已全部完成。
  最后的最后,我们要打开hexo文件夹,里面有一个名为_config.yml的文件,推荐用sublime打开,翻到文件的最下面,修改其中deploy的部分为如下:

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

然后保存,关闭文件,再打开Git Bash输入一条命令npm install hexo-deployer-git --save,该命令用来安装一个插件,辅助提交。最后如本段开头所说的,输入hexo d,即可将本次有改动的代码全部提交,没有改动的不会。

四、结语

至此,应该就可以通过类似于 http://c-0-re.github.io 的域名直接访问我们的个人博客了。“广阔天地,大有作为”,即使是这样一个十分简单的博客,也还有许多可以让我们发挥创造、学习、修改的地方。

最后附上常用的hexo命令:
hexo new “postName” #新建文章
hexo new page “pageName” #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c’关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

本文地址:https://blog.csdn.net/qq_45805420/article/details/109262079

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网