如何学习源码搭建(十分钟教你搭建自己的个人博客)

本文将一步步教你搭建Hexo部署的个人博客。如果不需要绑定个人域名,全部免费。


为什么用Hexo搭建独立博客?

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


为什么用Github和Coding托管平台?
  • Github是国外免费的Git代码托管平台。利用Github Page服务可以免费创建一个静态网站。

  • Coding则是国内Git代码托管平台。也提供page服务。

利用两个平台托管,可以利用域名解析实现国内的走coding,海外的走github,分流网站的访问。


注册Github和Coding

登陆Github官网和Coding官网,注册账号。创建以自己用户名为名字的项目,Github项目格式为username.github.io,Coding的项目名称为username。


配置SSH密钥

一、查看生成ssh密钥

  1. 查看是否已经有了ssh密钥,进入Git Bush,输入命令

    $ cd ~/.ssh

    如果没有则提示: No such file or directory

    如果有则进入~/.ssh路径下

  2. 生成密钥

    $ ssh-keygen -t rsa -C "email地址"

Generating public/private rsa key pair.

Enter file in which to save the key (/c/Users/xxx/.ssh/id_rsa): #不填直接回车

Enter passphrase (empty for no passphrase): #输入密码(可以为空)

二、将ssh密钥添加到Coding和Github

1. 进入C:/Users/xxx/.ssh目录,打开id_rsa.pub文件,全选复制。

2. 添加ssh key 到Github和Coding

  • Github:点击右上角账号头像的“▼”→Settings→SSH kyes→Add SSH and GPG keys→New SSH key,将复制的内容粘贴至Key。

  • Coding:点击右上角账号头像→账户→SSH 公钥,将复制的内容粘贴至公钥内容。

3. 打开Git Bush,输入命令

$ ssh -T git@github.com

如果现实以下内容,则说明Github中ssh配置成功。

Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.

输入命令

$ ssh -T git@git.coding.net

如果显示以下则说明coding中的ssh配置成功。

Hello username You’ve connected to Coding.net by SSH successfully!


安装准备软件
  • Node.js

  • Git


安装Hexo
  1. 安装Hexo要用到npm,不过速度实在有点慢,所以换成淘宝镜像

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

  2. 新建一个文件夹,例如blog。

  3. 进入blog文件夹,右键点击Git Bash Here。

  4. 安装Hexo

    $ cnpm install hexo-cli -g

  5. 初始化blog文件夹

    $ hexo init

  6. 安装依赖和插件

    $ cnpm install

  7. 启动服务器进行本地预览

    $ hexo s

    在浏览器中打开http://localhost:4000 ,成功的话即可看到博客页面,至此安装就完成了。

Hexo 常用命令

  • $ hexo g生成静态文件

  • $ hexo s 启动服务器

  • $ hexo d 部署网站。部署网站前,需要预先生成静态文件

  • $ hexo clean清除缓存文件 (db.json) 和已生成的静态文件 (public)

卸载Hexo

  • 3.2.0版本执行$ npm uninstall hexo-cli -g,之前版本执行$ npm uninstall hexo -g

安装旧版本Hexo,以2.8.3为例

  • $ npm install hexo@2.8.3 -g


安装并修改Hexo主题

安装Next主题,参考官网文档。


发布新文章

在blog目录下,输入命令

$ hexo new "hello"

会提示在blog\source\_posts\目录下新建了hello.md的文件,使用Markdown的编辑器打开编辑即可。

---

title: hello

date: 2018-03-12 09:28:34

tags:

---

hello!!!

修改deploy的值编辑完成,即可部署博客。

deploy:

type: git

repo:

github: git@github.com:yourname/yourname.github.io.git,master

coding: git@git.coding.net:yourname/yourname.git,master

再执行输入$ hexo clean

$ hexo g$ hexo d

可以合写出

$ hexo g -d

即可部署至Github和Coding。


开启Pages服务
  • Github部署完成后访问username.github.io即可正常访问博客。

  • Coding要单独开启Pages服务。

如何学习源码搭建(十分钟教你搭建自己的个人博客)(1)

如果没设置分支,填入master,选择立即开启即可。

开启后,访问username.coding.me即可。


绑定个人域名
  • Github需要上传一个CNAME文件到根目录,内容为你要绑定的域名,我们只需在blog\source文件夹下新建一个CNAME文件,填上域名,部署到Github即可。

  • Coding在Pages服务页面绑定个人域名即可。

如何学习源码搭建(十分钟教你搭建自己的个人博客)(2)

设置域名解析,我用的万网域名,在控制台进入域名解析界面,加入下面两条记录。

如何学习源码搭建(十分钟教你搭建自己的个人博客)(3)


404页面

在blog\themes\next\source\下新建404.html文件,内容如下

<!DOCTYPE HTML>

<html>

<head>

<title>404 - arao'blog</title>

<meta name="description" content="404错误,页面不存在!">

<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="robots" content="all" />

<meta name="robots" content="index,follow"/>

</head>

<body>

<script type="text/javascript" src="http://img.studyofnet.comhttp://qzonestyle.gtimg.cn/qzone_v6/lostchild/search_children.js" charset="utf-8"></script>

</body>

</html>


图床

推荐使用七牛。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页