Github pages博客搭建与域名绑定
<h1 id="github-page">Github Page</h1><p><code>github page</code>是由用户编写的托管在<code>github</code>上的静态网页,为了搭建一个个人博客,我们可以租用一个云服务器然后部署我们的博客项目,常见的比如<code>wordpress</code>,像wp这样的博客系统需要用到服务器后台的数据库,所以是动态的,<code>github page</code>相对于云服务器来说,不能提供数据库服务,所以资源都是静态存放在github上的,但是是免费的,而且速度也还可以,相对来说很稳定。</p>
<h1 id="hexo">Hexo</h1>
<p>什么是<code>Hexo</code>?<br>
<code>Hexo</code> 是一个快速、简洁且高效的博客框架。<code>Hexo</code> 使用 <code>Markdown</code>(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。简单来说<code>Hexo</code>就是一款适合用在<code>github page</code>的博客框架。</p>
<h1 id="安装步骤">安装步骤</h1>
<h2 id="git">Git</h2>
<p><code>Git</code>是分布式版本控制系统,我们需要用git上传我们的博客代码。</p>
<h2 id="nodejs">Nodejs</h2>
<p><code>Node.js</code> 是一个基于 <code>Chrome V8</code> 引擎的 <code>JavaScript</code> 运行环境,<code>Hexo</code>基于<code>Nodejs</code>。</p>
<h3 id="npm">npm</h3>
<p><code>NPM</code>是随同<code>NodeJS</code>一起安装的包管理工具,用来下载别人编写的第三方包。</p>
<h4 id="换源">换源</h4>
<p>因为<code>nodejs</code>是国外的技术,所以下载速度在次元壁的限制下会很慢所以我们可以换成国内的淘宝镜像</p>
<pre><code>npm config set registry https://registry.npm.taobao.org
</code></pre>
<p>查看是否换源成功</p>
<pre><code>npm config get registry
</code></pre>
<h2 id="hexo-1">Hexo</h2>
<p>新建文件夹用于存放博客文件,然后cd到该目录。</p>
<pre><code>npm install -g hexo-cli
</code></pre>
<p>安装完后用<code>hexo -v</code> 查看版本确保安装成功,之后初始化</p>
<pre><code>hexo init myblog #myblog是自己取的名字随你
</code></pre>
<p>进入<code>myblog</code>,安装依赖</p>
<pre><code>npm install
</code></pre>
<p>打开<code>myblog</code>文件夹目录结构如下</p>
<ul>
<li>node_modules: 依赖</li>
<li>scaffolds:生成文章的一些模板</li>
<li>source:用来存放你的文章</li>
<li>themes:主题</li>
<li>public:运行之后会生成,博客的静态文件</li>
<li>以及一些配置文件</li>
</ul>
<pre><code>hexo g# Generate static files
hexo server
</code></pre>
<p><img src="https://img2018.cnblogs.com/blog/1425720/201905/1425720-20190509225337249-2064283994.png" alt="" loading="lazy"><br>
打开<code></code>hexo服务在浏览器打开<code>http://localhost:4000</code>就能看到博客了<br>
<img src="https://img2018.cnblogs.com/blog/1425720/201905/1425720-20190509225350243-818583230.png" alt="" loading="lazy"><br>
创建新仓库 命名为用户名+.github.io例如<code>ljshllw.github.io</code></p>
<h3 id="创建ssh">创建ssh</h3>
<pre><code>git config --global user.name "yourname"
git config --global user.email "youremail"
</code></pre>
<pre><code>ssh-keygen -t rsa -C "youremail"
</code></pre>
<p>回车直到结束,<code>ssh</code>,简单来讲,就是一个秘钥,其中,<code>id_rsa</code>是你这台电脑的私人秘钥,不能给别人看的,<code>id_rsa.pub</code>是公共秘钥,可以随便给别人看。把这个公钥放在<code>GitHub</code>上,这样当你链接<code>GitHub</code>自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过<code>git</code>上传你的文件到<code>GitHub</code>上<br>
登陆<code>github</code>找到<code>setting</code>添加<code>SSH key</code> 将刚才生成的<code>id_rsa.pub</code>(文件所在地址生成在<code>ssh-keygen</code>命令的时候有显示查看<code>gitbash</code>记录即可得知)文件里的内容粘上去<br>
<img src="https://img2018.cnblogs.com/blog/1425720/201905/1425720-20190509225405660-1210073141.png" alt="" loading="lazy"><br>
在<code>gitbash</code>中输入如下命令查看是否成功</p>
<pre><code>ssh -T git@github.com
</code></pre>
<h3 id="关联">关联</h3>
<p>修改<code>_config.yml</code>(你的博客目录下)文件,下拉到底部</p>
<pre><code>deploy:
type: git
repo: https://github.com/name/name.github.io.git #name为你的github名称
branch: master
</code></pre>
<p>安装<code>deploy-git</code></p>
<pre><code>npm install hexo-deployer-git --save
</code></pre>
<p><code>Hexo</code>素质三连完成发布</p>
<pre><code>hexo clean # 清理
hexo generate # 生成
hexo deploy # 部署
</code></pre>
<h1 id="绑定域名">绑定域名</h1>
<h2 id="买域名">买域名</h2>
<p>国内的可以去阿里云旗下万网买,缺点是需要认证,国外的话可以去<code>GoDaddy</code>买,不用实名认证,前提是不部署在国内厂商的云服务器,政策要求都需要认证(十分之坑),<code>.top</code>是新出的中国顶级域名价格也很便宜买个玩玩也不错。我这里是在阿里云买的,因为方便,<code>bearw.top</code> <熊网?熊王> ,买了很久了忘了价估计也就是20块钱一年,长度短有意义的域名肯定相对就比较贵成千上万的我只敢看看,长度很长的个位数就能拿下。</p>
<h2 id="解析">解析</h2>
<p>我这里用阿里云的做演示,登陆阿里云控制台,选择域名选项,添加两条CNAME解析<br>
<img src="https://img2018.cnblogs.com/blog/1425720/201905/1425720-20190509225526881-1447033021.png" alt="" loading="lazy"></p>
<h2 id="github设置">github设置</h2>
<p>登陆<code>github</code>选择<code>gitpage</code>仓库,选择<code>settings</code>,下滑找到<code>Github Pages</code> 在<code>Custom domain</code>里填入你的域名,然后点击<code>Save</code>,稍等一会就好了,之后会默认转成<code>HTTPS</code>。<code></code>SSL证书来自<code>Let's Encrypt</code>。<br>
<img src="https://img2018.cnblogs.com/blog/1425720/201905/1425720-20190509225543111-1134636955.png" alt="" loading="lazy"></p>
<h1 id="个性化">个性化</h1>
<p><code>Hexo</code> 支持主题设置,可以自己选择安装主题,可以配置的选项也很多,对于新手很友好,熟悉前端的小胖友们更是可以自行定制属于自己的博客。</p>
<h1 id="bearwtop点我">bearw.top点我!</h1>
<p>也是因为今天突然想起来之前买了域名还没用,就起兴弄个这个玩玩,顺便分享给大家,如果有兴趣可以自行摸索。</p><br><br>
来源:https://www.cnblogs.com/ljsh/p/10841670.html
頁:
[1]