1. 介绍
这篇文章详细介绍了如何利用GitHub Pages或者Bitbucket,配合Hexo搭建个人博客,如果你想拥有个人域名,需要进行域名注册,本文不涉及这个,只简单描述最基础的个人博客的搭建。
GitHub是最出名的免费代码托管空间,但它的Repositories都是public(公共)的,所有人都能下载你的代码,如果你不想分享代码,就要付费。与之相反,Bitbucket的免费版本就可以无限拥有private repo,如果你不想付费,又不想分享你的网页设置的代码,建议用Bitbucket。
2. 注册和新建Repository
如果你不是GitHub或者Bitbucket用户,先去GitHub官网或者Bitbucket官网创建用户。
2.1 GitHub用户
创建好GitHub用户后,点击右上方的用户头像,再点击"your repository",点击"New"创建新的repository (简称repo)。
在“Repository name”写下“<你GitHub的username>.github.io”,再按“create repository”,这里的repository name就是你的博客网址。
2.2 Bitbucket用户
Bitbucket界面左方“+”→“create repository”
如果是私密,打勾“This is a private repository”,repository name为<你的bitbucket用户名>.bitbucket.org,新建repo就完成了,这个repository name就是你的博客网址。
3 安装工作
3.1 安装Git
如果你用的是MacBook,可以直接在terminal完成Git安装;你也可以选择在Git官网安装。
# 安装Git
brew install git
安装成功后,可通过terminal或者command查看version以确保成功安装
git version
3.2 安装Node.js
在Node.js官网下载,安装完在terminal或者command输入以下代码查看version以确保安装成功
node -v
3.3 安装Hexo和扩展
在terminal或者command输入以下代码安装Hexo和部署用到的扩展
npm install hexo-cli -g
npm install hexo-deployer-git --save
4. 创建本地文件夹用来管理静态网站
输入以下代码,在当前的地址新建一个名叫“blog”的文件夹:
hexo init blog
如果你想在另外一个地址建立这个文件夹:
cd <你想要放文件夹的地址>
hexo init blog
新建blog文件夹后,输入以下命令:
cd blog # 去到blog这个文件夹
npm install
hexo g # 或hexo generate
hexo s # 或hexo server
这是我们就可以在浏览器输入http://localhost:4000/ 浏览静态网页了。
这样本地静态网页基本设置好,接下来就是怎么把这个静态网页部署到GitHub Pages
5. 部署Hexo静态网页到GitHub Pages
把以下工作提前设定好后,以后做完修改可以直接在terminal中输入hexo d -g
完成更新和部署,但第一次搭建需要完成以下步骤:
5.1 生成SSH key
第一步:查看有没有SSH key
cd ~/.ssh
ls # 查看文件夹里所有文件
第二步:如果文件夹中没有“id_rsa”和“id_rsa.pub”两个文件,先输入命令:
ssh-keygen -t rsa -b 4096 -C "username@mailbox.com" #这里请输入你但GitHub的邮箱
这时弹出两行内容:
Generating public/private rsa key pair.
Enter file in which to save the key:
可以直接按回车,默认保存在/Users/admin/.ssh/id_rsa 中,之后会弹出:
“Enter passphrase (empty for no passphrase):” 【输入密码就好】
“Enter same passphrase again: ”【再次输入同一个密码】
到这里就生成了新的SSH密码了。
5.2 添加SSH key到SSH agent
eval "$(ssh-agent -s)"
ssh-add -K ~/.ssh/id_rsa
5.3 将生成的SSH key和GitHub或者Bitbucket关联起来
在命令行中输入pbcopy < ~/.ssh/id_rsa.pub
,SSH key就复制好了。
如果你是GitHub用户,右上角个人头像 → “Settings” → “SSH and GPG keys → “New SSH key”
如果你是Bitbucket用户,点入你的网站的repo → 左边栏目的“Settings” → “Access keys” → “Add key”
“Title”可以填这个key的描述,GitHub建议如果是MacBook用户,可以填“Personal MacBook”,“Key”就直接粘贴刚刚复制好的SSH key。
这样就关联好SSH key和GitHub了。
5.4 部署网站到GitHub pages
cd <blog所在的directory>
open _config.yml # 打开文件进行修改
title 输入网站名字,author输入你的名字,其他可以忽略,也可以根据你的需求补充。
拉到最下方的deployment部分,
deploy:
type: git
repo: 如果是GitHub,输入git@github.com:<username of GitHub>/<username of GitHub>.github.io.git。如果是Bitbucket,输入https://bitbucket.org/<username of Bitbucket>/<username of Bitbucket>.bitbucket.org
branch: master
保存后回到terminal面板,输入:
hexo g
hexo d
这就完成部署了,在浏览器输入http://<username>.github.io或者http://<username>.bitbucket.io就能打开个人博客了。
参考链接
手把手教你使用Hexo + GitHub Pages搭建个人独立博客
Generating a new SSH key and adding it to the ssh-agent