5分钟 0元搭建个人独立博客网站(一)Hexo + github page

时间:2022-11-29 07:17:58


5分钟 0元搭建个人独立博客网站(一)Hexo + github page

直接入正题,先看北妈个人博客地址:http://www.guoxiaobei.com

 

微信不允许加入外链,你只能复制去外部浏览器打开,或者看完文章在底部的 “阅读原文”,可以直接进去。

 

这个时代,普通人拥有自己的独立博客或网站有多么重要不用再说了,更不用说我们是程序员。

 

很久之前答应过大家,点赞超过200,就放出独立博客教程,结果那篇文章直接到了300赞,没法逃了。

 

而且也足以证明,大家是多么渴望拥有一个自己的网站。

 

但传统意义上,建立网站是需要花钱的,服务器、数据库等,而且价格还不菲呢,那怎么办?

 

聪明人早有办法,那就是利用github + 自动生成程序+几句命令直接组建网站,其实网络有很多配置教程了。

 

如果觉得北妈写的不好,可以自行搜索,大同小异,只不过我写的更为清晰、易懂。

 

先看下我的博客在github的 开源地址:
​​​ https://github.com/xiaobei666/xiaobei666.github.io.git​

 

由于这个属于教程系列,涉及到一系列命令、代码、配置,由于在微信公众号不好展示,长篇也说不明白。

 

所以我把这个【5分钟 0元搭建独立博客系列】分为3篇,今天先放出“一”。

 

希望大家多多转发和收藏,好东西千万不要捂着。

 

说明条件:Github Pages + Hexo + Node.js。
 

系统环境:我是MAC电脑的OSX系统,所以截图和命令都是mac的,但和windows一样,这个不用担心。

 

大体流程:其实简单,就是命令

  1. 拥有一个​​github pages​
  2. 在本地电脑里配置​​hexo​​的环境(​​hexo​​与​​github pages​​绑定,写博文修改博文等,生成静态博客)
  3. 绑定自己的域名(也可以不用绑定,​​github pages​​有二级域名,只不过绑有一个属于自己的域名,才算真正的个人网站)

 

这是一篇有关如何使用Github Pages和博客程序 Hexo搭建自己独立博客的入门详细教程,里面介绍了如何将Hexo部署到自己的Github项目中,并且可以独立访问。

 

第一篇,先介绍 Github Pages + Hexo 是什么,并且安装命令和配置,达到本机访问。

第一步:关于Github、Github Pages建立仓库

一、Github的优点

  • GitHub是基于git实现的代码托管。理论上可以建立无限个网站。
  • GitHub可以免费使用,并且快速稳定。
  • Github上面很多开源库,所以你懂得。

二、什么是Github Pages

Github Pages可以被认为是用户编写的、托管在github上的静态网页。

它是github官方提供的,静态解决方案,就是为了让你展示自己的文档和网页效果

三、为什么要使用Github Pages

  • 可以绑定你的域名(但暂时貌似只能绑定一个)。
  • 简单快捷,使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建、购买服务器和写数据库的麻烦。
  • 所以,这个Github Pages 其实就是传统意义的放网页的服务器,明白了么?

 


不用多问,按步骤开始

1、建立你的 Github Pages 仓库

 

创建​​Github Pages​​​比较简单,只要你有一个github账号在创建一个仓库就行了,但是这个仓库是有规则的,其格式必须为:​​你的名字.github.io​

比如我的:xiaobei666.github.io

然后根据提示一直下一步就行,非常简单。

如果你连github 账户都没有、不会创建,那么请你先去熟悉下github,不然我们没法往下玩儿了。

如果你没听过github,我觉得你可以退出程序员行业了。

5分钟 0元搭建个人独立博客网站(一)Hexo + github page

5分钟 0元搭建个人独立博客网站(一)Hexo + github page

2、安装 Hexo

前提必须安装Node.js ,也就是要用npm命令来安装。如果你身为2019年的前端,连npm 命令都没用过,我请你赶紧学习了。

我这里默认你安装了node.js,如果我还交你怎么安装nodejs,是不是还要交你怎么开机?

Hexo介绍

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

​Hexo​​​的安装网上有很多教程,但很多都是粘贴复制,过时、过期的命令,而且版本不同,命令也有差异,所以最好的还是参考​​Hexo​​官方的安装教程来一步一步走。

Hexo安装

安装命令:$ npm install -g hexo-cli

打开你的系统终端,windows系统可以鼠标右键点击Git Bash Here,输入npm命令即可安装。

mac系统的不用介绍了吧。


 


npm install hexo-cli -g npm install hexo-deployer-git --save

第一句是安装hexo。

第二句是安装hexo部署到 git page的deployer,两个都需要安装。

创建Hexo文件夹

安装Hexo完成后,根据自己喜好建立目录(如F:\Blog\Hexo),直接进入F:\Blog\Hexo文件夹下右键鼠标,点击Git Bash Here,进入Git命令框,执行以下操作。


 


$ hexo init

$ npm install

安装 Hexo 完成后,Hexo 将会在指定文件夹中新建所需要的文件。整个过程都是自动化的。

5分钟 0元搭建个人独立博客网站(一)Hexo + github page

执行  $ npm install 后,会根据 package.json 里的信息,自动安装插件,所有过程不用管。

 

这时候,其实hexo已经在你的机器上了,也就是我们常说本地开发版。

 

如果你想看本地效果,就这样。

执行下面语句,执行完即可登录 localhost:4000 查看效果


 


hexo generate hexo server

 

 

5分钟 0元搭建个人独立博客网站(一)Hexo + github page

 

到这里,篇幅已经很长了,所以今天第一篇到这里结尾。

 

已经实现了,让你看到庐山真面目,只不过这个“庐山” ,还没有正式对外发布。

 

但你已经可以在本地服务器,通过传统的 localhost:4000 查看并且修改了。

 

至于怎么写博客,你先看下这个hexo的官方说明记录,先了解个大概,后面第二篇,很快上来。

 

hexo 中文官方文档: https://hexo.io/zh-cn/docs/setup.html

 

每天金句:哪里有人喜欢孤独,只不过不乱交朋友罢了,那样只能落得失望



但今天,因为写的好,而且写的超级累,并且让你拥有了真正意义上的独立博客。 

 

 

每天只想听你们说:小北最帅!


前端你别闹 公众号 

5分钟 0元搭建个人独立博客网站(一)Hexo + github page