我从 2016 年开始写博客, 陆陆续续写了大概两百篇博客. 写博客有很多好处, 其一是它能够迫使你总结你学习的知识, 你需不但的消化自己的知识点, 使你对知识有了更深刻的认识; 其二是你的博客如同你的个人简历, 记录了你的学习历程, 通过写博客, 可以让别人认识你, 可以结交更多的行业朋友; 其三, 博客起到了传播知识的作用, 特别是技术类的博客能够帮助别人解决技术问题, 帮助人是一件快乐的事, 何乐而不为. 所以写博客对于程序员来说至关重要, 在我之前的文章, 我已经讲述过了, 写博客给我带来了什么 https://mp.weixin.qq.com/s/uScK46OndByFKaPlaWkp0w , 再次不在赘述.
我一开始写博客是从简书开始的, 当时被简书优雅的 Markdown 写作方式所吸引. 刚开始写文章网的阅读量, 一篇能够达到几百的阅读量是非常开心的事情, 如果能够被简书推荐到首页能够开心好几天. 在简书我认识了木东居士 https://www.jianshu.com/u/2453cf172ab4 , 仗剑走天涯 https://www.jianshu.com/u/2453cf172ab4 , 并在那时建立了简书圈, 并保持了非常好的友谊关系, 非常的珍贵.
大概 17 年初我将自己的写博客主要阵地转移到了 CSDN, 原因是 CSDN 在百度搜索引擎中占据了最高的权重. 后面证明我的判断是正确的, 我的 CSDN 博文阅读量一路飙升, 让更多的人可以的阅读我的博客.
就在上个月我阅读了纯洁的微笑的博文 技术人如何搭建自己的技术博客这篇文章, 我决定折腾一下搭建一下自己的个人博客.
其实在 17 年, 我就开始搭建了自己的个人博客, 采用 Jekyll 静态博客, 托管在 GitHub 上面的, 并且买了自己的域名 fangzhipeng.com,cname 到 GitHub 上. 由于 GitHub 网络不稳定, 体验实在是太差, 一直没有怎么打理, 处于一种无人管理的状态.
就在月初, 我将个人的博客迁移到了自己的服务器, 并在群里放出来, 有人就让我写篇博文, 让他参考下如何搭建属于自己的个人博客. 于是我抽空写出了这篇文章.
这篇文章详细的介绍了如何搭建我的个人博客.
使用 GitHub 托管博客
在 GitHub 上托管博客上非常简单的一件事, 只需要 fork 一个你喜欢的博客的主题, 并将 fork 的工程名修改为 {GitHub-username}.GitHub.io, 并将原博主的文章删除, 并放上自己的博文, 就可以了.
比如我的博客 https://www.fangzhipeng.com/ 使用的是 https://github.com/Huxpro/huxpro.github.io 的主题, 首先我将这个项目 fork 一下, 并将 fork 后的项目改名字为 forezp.GitHub.io, 读者需要将 forezp 替换成自己的 GitHub 用户名.
然后打开网页 forezp.GitHub.com 就可以访问该主题的博客了. 将修改后项目 Git clone 下来, 按照主题说明进行配置的修改, 将原博主的文章删除, 替换成自己的博文, Git push 修改后的工程到 GitHub 上面, GitHub pages 就会自动构建, 根据你的修改内容生成页面, 访问 {GitHub-username}.GitHub.io 就可以看到修改后的内容.
如果你需要自己的域名, 可以在阿里云上申请自己的域名, 比如的我的域名为 fangzhipeng.com. 在阿里云的控制台的域名解析配置以下的内容:
并在项目中的根目录上加 CNAME 文件, 写上自己申请的域名, 比如的我的:
http://www.fangzhipeng.com
大概过 10-20 分钟之后, 就可以通过域名访问你的个人博客了, 通过 {GitHub-username}.GitHub.io 访问个人博客也会显示你申请的域名.
需要注意的是, 域名需要备案哦.
使用自己的服务器部署博客
使用 Gthub 搭建个人博客简单, 快捷, 方便, 但是 GitHub 在国外啊, 网络极其不稳定, 访问速度慢, 让人抓狂, 这时可以将自己的博客部署在阿里云的 ECS 上. ECS 需要购买哦, 需要购买的同学点击这里, 领取代金券.
本人使用 Jekyll 进行搭建的博客, 所以需要在服务中安装 Jekyll 环境, 我的服务器系统版本为 entOS 7.2, 安装的 jekyll 版本为 3.8.4.
安装 jekyll 主要参考了 https://jekyllcn.com/docs/installation/, 因为安装过程比较繁琐和报的错比较多, 现在详细讲解下, 在我安装 jekyll 的过程和所遇到的坑.
安装 Node
安装 Node 环境, 执行以下命令:
- wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz
- xz -d node-v8.12.0-Linux-x64.tar.xz
- tar -xf node-v8.12.0-Linux-x64.tar
- ln -s ~/node-v8.12.0-Linux-x64/bin/node /usr/bin/node
- ln -s ~/node-v8.12.0-Linux-x64/bin/NPM /usr/bin/NPM
- node -v
- NPM
安装 Ruby
Jekyll 依赖于 Ruby 环境, 需要安装 Ruby, 执行以下命令即可:
- wget https://cache.ruby-lang.org/pub/ruby/2.4/ruby-2.4.4.tar.gz
- mkdir -p /usr/local/Ruby
- tar -zxvf Ruby-2.4.4.tar.gz
- cd Ruby-2.4.4
- ./configure --prefix=/usr/local/Ruby
- make && make install
- cd ~
- VIM .bash_profile
- source .bash_profile
安装 gcc
安装 gcc 执行以下命令:
- yum -y update gcc
- yum -y install gcc+ gcc-c++
安装 jekyll
最后安装 Jekyll, 执行以下命令
- Gem install jekyll
- jekyll --version
- Gem update --system
可以通过 jekyll --version 查看版本来验证是否安装成功, 如果安装成功, 则会显示正确的版本号.
安装过程中可能存在的问题
使用 jekyll 创建一个博客模板, 并启 Server 服务, 执行以下的命令:
- jekyll new myblog
- cd myblog/
- jekyll serve
当执行 jekyll serve 命令, 我服务器环境报来以下的错误:
- `block in verify_gemfile_dependencies_are_found!': Could not find gem'minima (~> 2.0)' in any of the Gem sources listed in your Gemfile. (Bundler::GemNotFound)
- from /usr/local/Ruby/lib/Ruby/site_ruby/2.4.0/bundler/resolver.rb:257:in `each'
查了相关的资料, 需要安装 bundler 和 minima 插件, 安装命令如下:
- Gem install bundler
- Gem install minima
部署我的博客
部署博客需要在服务器中编译博客, 然后编译后的博客放在 Nginx 服务的静态路径上
编译博客
需要 Git 工具, 下载在 GitHub 上面的代码, 执行以下命令:
- Git clone https://github.com/forezp/forezp.github.io
- cd forezp.GitHub.io
- jekyll serve
jekyll serve 命令会编译我从 GitHub 上下载的源码, 在这一步, 第一次执行会报以下的错误:
- Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.
- Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed.
是因为博客需要用到 sitemap 和 paginate 插件, 安装下即可.
- Gem install jekyll-sitemap
- Gem install jekyll-paginate
重新执行 jekyll serve, 运行成功, 此时可以通过 curl 命令查看服务器里部署的博客.
部署到 Nginx 服务器上:
通过 Jekyll 编译后的静态文件需要挂载到 Nginx 服务器, 需要安装 Nginx 服务器. 安装过程参考了 http://nginx.org/en/linux_packages.html#mainline
按照文档, 新建文件 / etc/yum.repos.d/nginx.repo, 在文件中编辑以下内容并保存:
- [nginx]
- name=nginx repo
- baseurl=http://nginx.org/packages/centos/7/$basearch/
- gpgcheck=0
- enabled=1
然后执行安装 nginx 命令, 如下:
yum install nginx
Nginx 配置成功后, 需要设置 Nginx 的配置, 配置文件路径为 / etc/nginx/conf.d/default.conf, 配置的内容如下:
- server {
- listen 80;
- server_name localhost;
- location / {
- root /usr/share/nginx/HTML;
- index index.HTML index.htm;
- }
- error_page 404 /404.HTML;
- error_page 500 502 503 504 /50x.HTML;
- location = /50x.HTML {
- root /usr/share/nginx/HTML;
- }
- }
安装 Nginx 服务器成功后, 将 Jekyll 编译的博客静态 HTML 文件输出到 Nginx 服务器上, 执行以下的命令:
jekyll build --destination=/root/blog/HTML
启动 Nginx 服务器, 就可以正常的博客网页了, 如果需要在浏览器上访问, 需要在阿里云 ECS 控制台的安全组件暴露 80 端口. 如果想通过域名访问, 需要将域名解析设置指向你的服务器.
非 www 域名的重定向到 www
比如我想访问 http://fangzhipeng.com 重定向到 http://www.fangzhipeng.com 上, 需要在 Nginx 的配置文件 / etc/nginx/conf.d/default.conf, 修改配置以下内容:
- listen 80;
- server_name fangzhipeng.com www.fangzhipeng.com;
- if ( $host != 'www.fangzhipeng.com' ) {
- rewrite "^/(.*)$" http://www.fangzhipeng.com/$1 permanent;
- }
自动化部署
通过设置 GitHub 的 webhook 可以实现自动化构建和部署. 过程是, 提交博文或者配置到 GitHub 仓库, 仓库会触发你设置的 webhook, 会向你设置的 webhook 地址发送一个 post 请求, 比如我设置的请求是在服务器的跑的一个 Node.JS 程序, 监听 gitub webhook 的请求, 接受到请求后, 会执行 shell 命令.
首先设置 GitHub 仓库的 webhook, 在 GitHub 仓库的项目界面, 比我的我的项目界面 https://github.com/forezp/forezp.github.io, 点击 Setting->Webhooks->Add Webhook, 在添加 Webhooks 的配置信息, 我的配置信息如下:
- Payload URL: http://www.fangzhipeng.com/incoming
- Content type: application/JSON
- Secret: a123456
这样 Webhook 就设置成功了, 现在在博客所在的服务端去监听 GitHub Webhook 发送的请求, 我采用的开源组件去监听 GitHub-webhook-handler, 项目地址为:
NPM install -g GitHub-webhook-handle
安装成功后, 在 / root/node-v8.12.0-Linux-x64/lib/node_modules/GitHub-webhook-handler 下新建 deploy.JS 文件:
- var http = require('http')
- var createHandler = require('github-webhook-handler')
- var handler = createHandler({ path: '/incoming', secret: 'a123456' })
- function run_cmd(cmd, args, callback) {
- var spawn = require('child_process').spawn;
- var child = spawn(cmd, args);
- var resp = "";
- child.stdout.on('data', function(buffer) { resp += buffer.toString(); });
- child.stdout.on('end', function() { callback (resp) });
- }
- http.createServer(function (req, res) {
- handler(req, res, function (err) {
- res.statusCode = 404
- res.end('no such location')
- })
- }).listen(3001)
- handler.on('error', function (err) {
- console.error('Error:', err.message)
- })
- handler.on('push', function (event) {
- console.log('Received a push event for %s to %s',
- event.payload.repository.name,
- event.payload.ref);
- run_cmd('sh', ['./start_blog.sh'], function(text){ console.log(text) });
- })
上述代码中, 指定了 Node.JS 服务的践踏端口为 3001, 监听了 path/incoming,Secret 为 a123456, 这和之前 GitHub Webhook 设置的要保持一致. 代码 run_cmd('sh', ['./start_blog.sh'], 指定了接受到请求后执行./start_blog.sh,start_blog.sh 文件的代码如下, 首先进入到博客的代码文件, 拉代码, 编译.
- echo `date`
- cd /root/forezp.GitHub.io
- echo start pull from GitHub
- Git pull
- echo start build..
- jekyll build --destination=/usr/share/nginx/HTML
然后需要使用 forever 来启动 deploy.JS 的服务, 执行命令如下:
- sudo NPM install forever -g #安装
- $ forever start deploy.JS #启动
- $ forever stop deploy.JS #关闭
- $ forever start -l forever.log -o out.log -e err.log deploy.JS #输出日志和错误
- /root/node-v8.12.0-Linux-x64/lib/node_modules/forever/bin/forever start -l forever.log -o out.log -e err.log deploy.JS
如果报错:
/root/node-v8.12.0-Linux-x64/lib/node_modules/forever/bin/forever start -a -l forever.log -o out.log -e err.log deploy.JS
最后一步, 需要在 nginx 服务器的配置文件, 需要将监听的 / incoming 请求转发到 Node.JS 服务上, 配置代码如下:
- location = /incoming {
- proxy_pass http://127.0.0.1:3001/incoming;
- }
这样, 当你提交了文章或者修改的配置到 gitub 上, GitHub 通过 webhook 向你所在的服务器发送请求, 服务器接收到请求后执行 sh 命令, sh 命令包括了重新 pull 代码和编译代码的过程, 这样自动化部署就完成了, 你只需提交代码, 服务器就触发 pull 代码和重新编译的动作.
补充
博客可以设置百度统计, 谷歌分析, 不蒜子统计, Gittalk 留言板等功能, 这些功能需要自己申请账号, 实现起来比较简单, 具体自己百度.
另外, 如果博客需要上 https 协议, 需要在阿里云申请免费的 SSL 证书, 申请完之后, 可以在阿里云上查看 Nginx 安装 SSL 证书的教程, 并做配置, 按照它的提示来, 比较简单. 最后涉及到了涉一个重定向的问题, 比如我的网站, 我需要将 http://fangzhipeng.com , http://www.fangzhipeng.com , https://fangzhipeng.com 全部重定向到 https://www.fangzhipeng.com, 这时需要修改 nginx 的配置文件 default.conf, 现在我贴出我的完整的配置如下:
- server {
- listen 80;
- server_name fangzhipeng.com www.fangzhipeng.com;
- return 301 https://www.fangzhipeng.com$request_uri;
- }
- server {
- listen 443;
- server_name fangzhipeng.com;
- return 301 https://www.fangzhipeng.com$request_uri;
- }
- server {
- listen 443 default_server ssl;
- server_name www.fangzhipeng.com;
- #if ( $host != 'www.fangzhipeng.com' ) {
- # rewrite "^/(.*)$" http://www.fangzhipeng.com/$1 permanent;
- # }
- ssl on;
- root HTML;
- index index.HTML index.htm;
- ssl_certificate cert/215042476190582.pem;
- ssl_certificate_key cert/215042476190582.key;
- ssl_session_timeout 5m;
- ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
- ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
- ssl_prefer_server_ciphers on;
- location / {
- root /usr/share/nginx/HTML;
- index index.HTML index.htm;
- }
- error_page 404 /404.HTML;
- # redirect server error pages to the static page /50x.HTML
- #
- error_page 500 502 503 504 /50x.HTML;
- location = /50x.HTML {
- root /usr/share/nginx/HTML;
- }
- }
到此, 我的博客搭建过程全部讲解完毕, 如果有任何问题欢迎加我微信 miles02(备注博客疑问) 和我讨论, 如果问的人多, 我考虑建一个交流群, 大家一起讨论答疑. 大家也可以在留言版上留下自己的博客, 让大家互相访问.
来源: https://juejin.im/post/5bcdcbc551882577e512085a