前言
如今知识分享的平台和论坛有很多,像知乎、掘金、Stack Overflow、CSDN、博客园、思否还有简书等等,很多问题上面都有答案并且方便收藏,然鹅它们不够个性化,作为一个喜欢折腾的边缘人思量一番撅腚再弄个自己的無名小站,兜兜转转最后还是选择了 Hexo + hexo-theme-matery 这套架子来搭建。
一、安装 Git、Node.js、Hexo
1.1 安装 Git
为了把本地文件上传到 GitHub,需要用到分布式版本控制工具 Git,不得不说 Linus Torvalds YYDS,基于 Git 之后又有了全球最大的同性交友平台 GitHub,由三个旧金山的年轻人在2008年4月创办,正如每个伟大的传奇都开始于一场冒险,Tom 在这篇文章 我如何辞掉微软30万年薪邀约,创办GitHub 中谈到:当我老去,回顾一生,我想说,”哇,那是一场冒险“;而不是,“哇,我真的很安稳“。
Windows下载:到 Git 官网上下载,安装时选项默认,只不过最后一步添加路径时要选择Use Git from the Windows Command Prompt,这样我们就可以直接在命令提示符里打开 Git 了。之后,就可以直接右键空白处使用git bash来敲命令行了。
linux 下载:
sudo apt-get install git
安装完成后在命令提示符中输入
git --version来查看一下版本验证是否安装成功。
对了,记得 配置环境变量
1.2 安装 Node.js 或 NVM
Hexo 是基于Node.js 的,需要官网安装 Node.js,然后配置好环境变量,方法和 Git 一样,这里就不一一赘述了。(PS:强烈建议先装 NVM 再用 NVM 安装 Node,可能失效的链接如下: NVM 安装)
安装完后,打开命令行,输入:node -v和npm -v检查是否安装成功。
1.3 添加阿里的镜像源加速下载
npm config set registry https://registry.npm.taobao.org
1.4 安装 Hexo
Git 和 Node.js 安装好后,就可以去安装 Hexo 了,你可以先创建一个文件夹比如叫 Blog,用来存放自己的博客文件。
在该目录下右键空白处点击 Git Bash Here 定位到该目录下,然后输入命令 npm install -g hexo-cli 安装 Hexo。
npm install -g hexo-cli
安装完毕后输入 hexo -v 验证是否安装成功,接下来初始化一下 Hexo,输入 hexo init 初始化文件夹。
hexo init Blog
接着输入 npm install 安装必备的组件。
cd Blog // 进入这个MyBlog文件夹
npm install
新建完成后,指定文件夹 Blog 目录下有:
node_modules:依赖包public:存放生成的页面scaffolds:生成文章的一些模板source:用来存放你的文章themes:主题_config.yml:博客的配置文件
如此这般把本地的网站配置完毕后,输入hexo g生成静态网页,然后输入hexo s打开本地服务器
hexo g
hexo server(或者简写:hexo s))
然后在浏览器中打开http://localhost:4000/,就可以看到我们的博客网站啦!
按Ctrl + C关闭本地服务器
二、GitHub 创建个人仓库
接下来需要去注册一个GitHub账号,用来存放我们的网站。然后打开https://github.com/,新建一个仓库`New repository 输入自己的项目名,后面一定要加.github.io后缀,README`初始化也要勾上。
三、生成 SSH 添加到 GitHub
生成SSH添加到GitHub,连接Github与本地。
右键空白打开git bash,接着输入下面命令:
git config --global user.name "yourname"
git config --global user.email "youremail"
这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。
然后创建SSH,一路回车(三、四次来着)
ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。
ssh-keygen -t rsa -C "youremail"
这时它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。或者git bash中输入:
cat ~/.ssh/id_rsa.pub
准备将输出的内容复制到 GitHub 中进行保存:
打开GitHub,在头像下面点击settings,再点击SSH and GPG keys,新建一个SSH,名字随便取个,把id_rsa.pub里面的信息复制进去。
在git bash输入ssh -T git@github.com,如果出现你的用户名,辣就成功了。
四、将 Hexo 部署到 GitHub
这一步,我们就可以将Hexo和GitHub关联起来,也就是将Hexo生成的文章部署到GitHub上,打开博客根目录下的_config.yml文件,这是博客的配置文件,在这你可以修改与博客配置相关的各种信息。
修改最后一行的配置:
deploy:
type: git
repository: https://github.com/adaichan/adaichan.github.io
branch: master
repository 修改为你自己的 github 项目地址即可,就是部署时告诉工具,将生成网页通过 git 方式上传到你对应的链接仓库中。
这个时候需要先安装 deploy-git ,即部署命令,这样你才能用命令部署到 GitHub:
npm install hexo-deployer-git --save
然后依次进行:
hexo clean
hexo generate
hexo deploy
其中 hexo clean 清除了你之前生成的东西, hexo generate 顾名思义,生成静态文章,可以用 hexo g 缩写 ,hexo deploy 部署文章,可以用 hexo d 缩写。
注意
deploy时可能要你输入username和password
五、设置个人域名
目前你的个人网站的地址是yourname.github.io,如果不喜欢该网址,这就需要你设置个人域名了,就是需要花点银子。
不过,这一步不是必要的,如果目前还不想买域名可以先跳过,继续看后面的,以后想买域名了在还看这块
首先你得购买一个专属域名,xx云都能买,看个人喜好。以腾讯云为例,腾讯云官网购买,然后实名认证后进入腾讯云控制台,点云解析进去,找到你刚买的域名,点进去添加两条解析记录,然后打开你的github博客项目,点击settings,拉到下面Custom domain处,填上你自己的域名,保存。
这时候你的项目根目录应该会出现一个名为CNAME的文件了。如果没有的话,打开你本地博客/source目录,我的是D:\Blog\source,新建CNAME文件,注意没有后缀。然后在里面写上你的域名,保存。最后运行hexo g、hexo d上传到GitHub。
过不了多久,再打开你的浏览器,输入你自己的专属域名,就可以看到搭建的网站啦!
六、写文章、发布文章(G.S.D)
首先在博客根目录下右键打开git bash,安装一个扩展:npm i hexo-deployer-git
然后输入:hexo new post "article title",新建一篇文章
打开 D:\Blog\source\_posts 的目录,可以发现下面多了一个文件夹和一个.md文件,一个用来存放你的图片等数据,另一个就是你的文章文件。
你可以会直接下载一个 Typora 编辑器,在里面编写 Markdown 文件,可以实时预览。编写完 Markdown 文件后,根目录下输入hexo g生成静态网页,然后输入hexo s可以本地预览效果,最后输入hexo d上传到Github上。这时打开你的线上网址就能看到新发布的文章啦!(PS:Github 访问速度比较慢,可以参考前几步将网站同时多站点部署到国内的Coding、码云等各个托管平台)
七、吐槽
到这一个比较简陋的个人博客小站基本上就搭建完了,写得不算详细,主要其它的优化部分一言难尽,各种诸如环境和依赖包的兼容,配置语法的更新,三方插件失效或冲突等大坑小坑bug层出不穷,不是只言片语扯得清的(建议无视上面教程直接把我的网站项目全部 Ctrl+CV 跑起来后在里面把部分信息修改成自己的可以少走弯路)。若想实现一些花里胡哨的功能少不了大量的鼓捣折腾,不可能一蹴而就,毕竟我这也只是刚从未开化状态进入社会主义初级阶段,未来有空再来添砖加瓦。需要个性化定制主题可以参考 hexo-theme-matery ,相信会符合诸君口味,在这里致敬 闪烁之狐 的开源 ^o^