详细 hexo+Github Pages-搭建个人网站

  • 为什么选择hexo?
  • 搭建博客的基本步骤
  • 部署到Github Pages
  • 域名解析

为什么选择hexo?

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


搭建博客的基本步骤

  • 购买域名
  • 安装hexo
  • 注册github

一:购买域名

若小胖友们想把个人博客挂到属于自己的域名上,博主在这里建议大家提前把域名买好。
博主购买域名的地方是万网,注册登录后,填写你想要的域名


选择完自己域名后,付费就可以了!
(博主建议个人域名选择.me为后缀的较好-博主的域名就为carryguan.me)

二:安装hexo

装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
Git
Node.js

若你是IT小白,安装git/node没成功,博主carry给你个福利贴士
(博主就是这样一点点过来的 (# ̄▽ ̄#))
windows安装git
windows安装node.js

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

在这里建议小胖友们,先预习一下:
git入门教程
github趣味详解

先进入一个文件夹路径:例如我的

再执行下面的命令:

npm install -g hexo-cli

初始化框架
执行如下语句

 hexo init blog

(blog是我自己建立的用来装博客的文件夹)

2:再执行

cd blog

3: 最后执行

npm install

以上三条语句执行完毕后, 你会在blog文件夹里看到如下:

 ├── _config.yml //网站的配置信息,您可以在此配置大部分的参数。 
 ├── package.json 
 ├── scaffolds //模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。 
 ├── source //资源文件夹是存放用户资源的地方。
  | ├── _drafts
  | └── _posts 
 └── themes //主题文件夹。Hexo会根据主题来生成静态页面

最后看看你自己的个人网站:
在blog目录下执行gitbash命令:

1:新建一篇文章(我的第一篇文章)

 hexo new "我的第一篇文章"

会在/source/_post里自动生成了“我的第一篇文章.md”文件,之后新建的文章都将存放在此目录下。编辑“我的第一篇文章.md”文件可修改内容。

2:生成网站

hexo generate (可简写成 hexo g)

3:启动本地服务器

 hexo server (可简写成 hexo s)

4:在浏览器输入http://localhost:4000 即可查看网站。

三:注册github

github
填写完相应信息,注册成功后,重新登录,进入到这个页面


点击图片中所圈位置出现了如下:

Repository name里填写:你的用户名.github.io
(例如我的用户名是sunningcarryhaha,所以我的Repository name:sunningcarryhaha.github.io)
Description里随便填一下你的描述就好
Public选中
选中Initilize this respository with a README
最后点击绿色按钮创建


创建成功后
配置SSH-Key
详细步骤请点击此文章


将blog部署到Github Pages 上

两种方法:

  • 使用hexo deploy部署
  • 使用git push 部署

1:hexo deploy部署

找到blog目录下的配置文件_config.yml,用编辑器打开此文件
找到此文件中的deploy字段,按照以下配置
deploy:
type: git
repo: git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git
branch: master
注意需要提前安装一个扩展:
$ npm install hexo-deployer-git --save
然后在命令行中执行
hexo d

不幸的是,上述命令虽然简单方便,但是偶尔会有莫名其妙的问题出现,因此,我们也可以追本溯源,使用git命令来完成部署的工作。

2:使用gitbash,将public文件夹上传到自己的仓库中

第一步:进入到你的blog目录

 cd blog

第二步 :初始化博客

hexo g

第三步:把public文件夹上传到github仓库中

cd public
     git init (初始化本地仓库)
     git add .  (将本地文件加到仓库里)
     git commit -m "message" (设置提交信息)
     git remote add origin   git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git(本地仓库链接远程仓库)
     git push -u origin master (push文件到仓库中)

git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git
解释一下 :
sunningcarryhaha是用户名
sunningcarryhaha.github.io 是仓库名称
.git是后缀

详细的步骤可参考此
github push
git github 问题总结

部署成功以后,在浏览器中输入你的repository名字:例如我的sunningcarryhaha.github.io
就可以看到你的网站了


域名解析

  • 进入万网进行域名绑定
  • 进入public,新建CNAME
  • 把域名写到CNAME里
  • 传到github仓库里
    1:进入万网进行域名绑定





    安照以上图片进行操作
    ** 尤其注意:记录值那里填写的是:sunningcarryhaha.github.io.,也就是你的仓库名字后还有个"." **
    以上进行完毕后,接着下一步

2:进入blog下的public文件夹,新建 CNAME



3:将public文件夹下的CNAME上传到github仓库中



如果上传成功的话,进入到你的github仓库中会看到CNAME文件

4:为了防止域名解析出问题,博主建议将blog下的public下的CNAME文件,复制到blog下的source文件夹里,这样更新public,不会出现CNAME文件丢失的情况


如果以上步骤都进行完毕的话,博主carry恭喜你:bowtie:,小胖友你zen棒,现在在浏览器输入你的域名,就可以成功的看到你的个人网站啦!
当然这个网站还可以换主题,美化!这方面的文章敬请期待,博主会继续出博文的!


这个博客博主搭建了好久,走了好多弯路(原谅博主比较笨,呜呜!)
期间出了好多问题,最根本的原因是博主git方面不基础不好,所以建议小胖友们多练习一下git
这里推荐:
git入门教程
node.js安装菜鸟教程
git上传代码到github仓库
hexo官网
markdown入门
hexo主题推荐
next-hexo主题
hexo常见问题解决方案

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容