如何使用10个小时搭建出个人域名而又Geek的独立博客?

1、安装准备软件 Node.js、Git、GitHub DeskTop(前两个必须安装,后者可选)

2、本地搭建hexo框架、配置主题、修改参数、实现本地测试预览

3、链接GitHub、实现在线预览

4、购买域名并解析 (这里告诉大家一个方法,1元购买一个使用期限为一年.cn的域名 仅高校学生可以 )

5、日后站点的管理和运营

纸上得来终觉浅,要知此事须举行。世上无难事,就怕是懒人。以下以我的博客:blog.shijinrong.cn(shijinrong.cn是我一下行动)在windows下为例,教大家如何搭建一个独立博客。

安装流程

安装准备软件

Node.js

Git

GitHub Desktop (可选)

以上几个软件均是英文版本,请小白不要害怕,敢于面对。安装简单,在此不做详细介绍。

本地搭建hexo框架、配置主题

个人域名 独立博客 Geek

目录

I.Hexo简介

II.Hexo安装方法

III.Hexo配置方法

IV.Hexo主题修改

V.Hexo部署方法

I.Hexo简介

Hexo 是一个轻量的静态博客框架。通过Hexo可以快速生成一个静态博客框架,仅需要几条命令就可以完成,相当方便。

而架设Hexo的环境更简单了 不需要 lnmp/lamp/XAMPP 这些繁琐复杂的环境 仅仅需要一个简单的http服务器即可使用 或者使用互联网上免费的页面托管服务

比如本人的这个博客 就是托管于 GitHub Pages服务上

II.Hexo安装方法

参考官网中文文档,请尝试者仔细读教程和官方文档。这步很简单,正如官方网站写的那样只需要一条命令即可自动安装hexo框架。

$ npm install -g hexo-cli #使用 npm 安装 Hexo。

初始化hexo

请参考hexo官方文档,init命令中的就是文件夹aierui.github.io。初始化后,aierui.github.io里面就已经有 完整的Hexo框架了,这里可以在任意地方新建立一个文件夹并命名为aierui.github.io【不要问为什么】打开该文件,点击鼠标右键你会看到 一个Git bash here点击跳出git的黑窗口,输入命令$ npm install,完成后,指定文件夹的目录如下:

个人域名 独立博客 Geek

III.Hexo配置方法

熟悉hexo

为了让读者快速了解Hexo,我作几个简单介绍吧。当然,更多的还是需要仔细阅读文档才能了解更详细。

_config.yml 全局配置文件。要注意的是,该文件格式要求极为严格,缺少一个空格都会导致运行错误。小提示:不要用Tab缩进,两个空格符, 冒号:后面只用一个空格即可 。

themes 存放主题的文件夹

source 博客资源文件夹

source/_drafts 草稿文件夹

source/_posts 文章文件夹

themes/landscape 默认皮肤文件夹

……

官方文档中教详细。

配置hexo

做一些基础配置即可,请参考配置官方文档,这里也可以省略,因为在后面配置主题NExt是也有提到这里的配置修改。

IV.Hexo主题修改

Hexo主题非常多,可以参考丰富多彩的Hexo主题,本文选Next为主题,样式参考我的博客视己慎独。

到这里我们还是采用参考官方文档,5 分钟快速安装。在本地修改完这一连串的配置,(包括:语言设置、财产、菜单设置、侧栏设置、头像设置、作者名称、站点描述、标签云页面、分类页面、统计系统、评论系统等等)现在是需要下面的一个命令即可在本地成功预览你的博客样式。

V.Hexo部署方法

写完文章之后 就可以启动本地服务器测试了

$ hexo s #启动本地服务器测试

这个时候在浏览器中输入http://localhost:4000端口 静态的网站架设完成

个人域名 独立博客 Geek

当你修改好你想要的样式,包括头像,favicon图标,标题样式,第三方平台链接等等等等你心中完美的页面。那就可以继续下一个阶段了。再提示一 点,大家可以hexo主题修改一步就hexo s看下变化,初次接触对参数不清楚。只有hexo s后在可以在本地浏览到效果,Ctrl+C 停止服务器。

链接GitHub、实现在线预览

目录

I.注册GitHub

II.配置和使用 Github

III.SSH Key 配置成功

IV.实现在线预览

现在已经来到第三部分了,请你在坚持一下。

I.注册GitHub

访问:http://www.github.com/ 注册你的username和邮箱,邮箱十分重要,GitHub上很多通知都是通过邮箱的。注册过程比较简单,在此我不再啰嗦。界面任然是英文,请读者耐心一点。

II.配置和使用 Github

配置 SSH keys

我们如何让本地git项目与远程的github建立联系呢?用SSH keys。

检查 SSH keys的设置,首先我们需要检查你电脑上现有的ssh key:

$ cd ~/.ssh 检查本机的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

生成新的SSH Key:

$ ssh-keygen -t rsa -C "邮件地址@youremail.com"

Generating public/private rsa key pair.

Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

注意1: 此处的邮箱地址,你可以输入自己的邮箱地址;注意2: 此处的「-C」的是大写的「C」

然后系统会要你输入密码:

Enter passphrase (empty for no passphrase):<输入加密串>

Enter same passphrase again:<再次输入加密串>

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

注意:输入密码的时候没有*字样的,你直接输入就可以了。

最后看到这样的界面,就成功设置ssh key了:

个人域名 独立博客 Geek

添加 SSH Key 到 GitHub

在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。

1、打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。

2、登陆github系统。点击右上角的 Account Settings—>SSH Public keys —> add another public keys

3、把你本地生成的密钥复制到里面(key文本框中), 点击 add key 就ok了

测试

可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:

$ 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就好,然后会看到:

Hi aierui! You've successfully authenticated, but GitHub does not provide shell access.

设置用户信息

现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的。

Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。

$ git config --global user.name "aierui"//用户名

$ git config --global user.email "imland@outlook.com"//填写自己的邮箱

III.SSH Key 配置成功

本机已成功连接到 github。若有问题,请重新设置。常见错误请参考:

GitHub Help - Generating SSH Keys 和 GitHub Help - Error Permission denied (publickey)

IV.实现在线预览

创建仓库和本地远程到GitHub仓库

首先在GitHub上创建一个仓库repository,注意仓库名称必须为aierui.github.io,也是你之前在本地建立的文件夹名称,这里由于存在这个名称的仓库,无法重名。

个人域名 独立博客 Geek

# 将当前的改动暂存在本地仓库

$ git add .

# 将暂存的改动提交到本地仓库,并写入本次提交的注释是”first post“

$ git commit -m "first post"

# 将远程仓库在本地添加一个引用:origin

$ git remote add origin https://github.com/username/projectName.git

# 向origin推送gh-pages分支,该命令将会将本地分支gh-pages推送到github的远程仓库,并在远程仓库创建一个同名的分支。该命令后会提示输入用户名和密码。

$ git push origin gh-pages

在GitHub上将gh-pages merge 到msater上

添加部署代码

在站点的-config.yml文件新增字段

Deployment 站点部署到github要配置这里, 非常重要

deploy:

type: git 部署类型若有问题,其他类型自行google之

repository: https://github.com/Aierui/aierui.github.io.git

branch: master

plugins: -hexo-generator-feed

merge后就可以部署上去了,在Git命令黑窗口里输入

$ hexo g #生成静态网页

$ hexo d #开始部署

完成以上步骤,你算是成功了。在浏览器中输入aierui.github.io(自己对应即可)看到了你在本地搭建的博客主页一样,哇哇哇哇哇哇。开心死你了,不要忘了回来给我点赞呀~

Enjoy~

购买域名并解析

这一环节相对简单,可以参考一步步在GitHub上创建博客主页(3),

一元搞定域名(重头戏)

仅限在校的高校学生,社会人士请自行绕开,老老实实花钱购买吧

废话少说,直接上链接看我是怎么办到的一元搞定域名还送服务器,全体咆哮。我们大家一起欢呼一起咆哮吧,哈哈哈。

云+校园计划是腾讯云为在读高校生量身打造的扶持计划,旨在为高校生提供先进的技术支持、资金扶持和经验分享。同时让更多高校生了解云计算及互联网知识,为后续职业、创业发展奠定基础。

学生们请仔细研读腾讯云官方论坛领取的规则参与领取

将独立域名与 GitHub Pages 的空间绑定

DNS 设置

领取到域名后进行解析,进入到我的域名管理,添加域名,如下图设置。我这里设置了一个三级域名blog,大家可以自行忽略。设置后访问的就是blog.shijinrong.cn了,不是shijinrong.cn哟~~~~

个人域名 独立博客 Geek

其中A的两条记录指向的ip地址是github Pages的提供的ip

192.30.252.153

192.30.252.154

如博客不能登录,有可能是 github 更改了空间服务的 ip 地址,记得及时到在GitHub Pages查看最新的ip即可

www 指定的记录是你在 github 注册的仓库。

GitHub Pages 的设置

去到你的aierui.github.io 仓库,点击 CNAME(没有自行创建) ,再点击右下角的 铅笔 编辑,将 blog.shijinrong.cn 改成你的域名

个人域名 独立博客 Geek

域名绑定成功,域名解析成功,因此你在浏览中输入aierui.github.io或者现在blog.shijinrong.cn均可以访问到主页。

搭建成功快和小白自己不愿动手说拜拜吧,同时也恭喜你成为博主。记得常联系我喔~~嘻嘻

日后站点的管理和运营

如何更新博文

下载博客模板的ZIP,去到你frok的仓库地址:https://github.com/你的用户名/你的用户名.github.io。点击右下角的Download ZIP,你会得到一个名为「你的用户名.github.io-master.zip」的压缩包。

个人域名 独立博客 Geek

安装 github desktop管理你的博文

这里不再多赘述,可以看看官方文档,有使用说明。

图床

推荐使用七牛(10G空间,免费,配合Markdown使用简单)。

MarkDown

百度一大堆教程,但是我还是推荐锤子科技锤子便签做的教程。代码板块的MarkDown请读者自行学习。

注:相关网站建设技巧阅读请移步到建站教程频道。

posted on 2016-04-08 17:13  学渣的成长之路  阅读(297)  评论(0编辑  收藏  举报

导航