-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
42 lines (20 loc) · 26.4 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>如何搭建自己的博客</title>
<link href="/2020/11/22/ru-he-da-jian-zi-ji-de-bo-ke/"/>
<url>/2020/11/22/ru-he-da-jian-zi-ji-de-bo-ke/</url>
<content type="html"><![CDATA[<h1 id="如何搭建自己的博客"><a href="#如何搭建自己的博客" class="headerlink" title="如何搭建自己的博客"></a>如何搭建自己的博客</h1><h4 id="搭建博客需要些什么东西"><a href="#搭建博客需要些什么东西" class="headerlink" title="搭建博客需要些什么东西"></a>搭建博客需要些什么东西</h4><p> 博客是公开表达自己的地方，首先需要考虑的是，博客的代码和数据应该有个地方放置，它还是个网站，需要随时被人家访问，所以还应该有一个属于自己的网址；然后是考虑博客的呈现形式和内容，这时候就可以借用工具，让我们只需要专注于写内容而不用操心外观的问题；最后为了提高逼格，可以申请一个自己的域名，类似于<a href="http://www.xxx.com可以访问到博客的主页，再选择一个炫酷的博客主题让人耳目一新。" target="_blank" rel="noopener">www.xxx.com可以访问到博客的主页，再选择一个炫酷的博客主题让人耳目一新。</a></p><h4 id="github"><a href="#github" class="headerlink" title="github"></a>github</h4><p> github可以提供网站的服务，能满足博客源码及数据的存放和拥有自己个人域名网址的需求。</p><ol><li>注册Github账号，这步自行百度</li><li>新建仓库<strong>New repository</strong><img src="https://i.loli.net/2020/11/22/VUDnwpyoHjzg2JA.png" alt="image-20201122093845229"></li><li>仓库名字命名，xxx替换成你想要的名字，.github.io是必须的后缀，选择<strong>Add a README file</strong>, 然后确定创建仓库即可<img src="https://i.loli.net/2020/11/22/5pHyL2t8IuUPc6f.png" alt="image-20201122093729608"></li><li>进入仓库的Settings，下拉到Github Pages,点击Choose a theme现在一个网页的主题Commit Changes，然后点击Settings回到Github Pages，可以看到自己的网页地址，点击进去，就可以访问到自己的网站了<img src="https://i.loli.net/2020/11/22/8WNHUiZKc5O9Vuj.png" alt="image-20201122094747121"></li></ol><h4 id="hexo"><a href="#hexo" class="headerlink" title="hexo"></a>hexo</h4><p> 刚才github pages就是我们自己的网站了，接下来就是要完成博客组件配置，其实就是替换刚才的xxx.github.io项目下的内容。hexo是一个方便搭建博客的工具，提交博客文件，也只需要提交Markdown格式的文件就可以了，并不需要自己写html文件。为了完成这步工作，需要安装Git、 Node.js、 Hexo工具。</p><ol><li><p>安装<a href="https://nodejs.org/dist/v9.11.1/node-v9.11.1-x64.msi" target="_blank" rel="noopener">Node.js</a>，点击超链接下载，安装选项默认，<code>Win+R</code> 打开<code>cmd</code>输入<code>node -v</code>和<code>npm -v</code>，如果出现版本号，说明安装成功</p></li><li><p>配置Node.js国内镜像</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">npm</span> config <span class="token keyword">set</span> registry https://registry.npm.taobao.org<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li></ol><ol start="3"><li><p>安装<a href="https://git-scm.com/download/win" target="_blank" rel="noopener">Git</a>，安装选项默认，最后记得选择<code>Use Git from the Windows Command Prompt</code>，在<code>cmd</code>输入<code>git --version</code>，验证是否安装成功</p></li><li><p>连接github，打开git bash</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">git</span> config --global user.name <span class="token string">"michaelyyq"</span><span class="token function">git</span> config --global user.email <span class="token string">"[email protected]"</span>ssh-keygen -t rsa -C <span class="token string">"[email protected]"</span><span class="token function">cat</span> ~/.ssh/id_rsa_pub<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>打开github，点击<code>settings</code>，再点击<code>SSH and GPG keys</code>，将id_rsa_pub的内容复制黏贴到框中，输入<code>ssh -T [email protected]</code>，如果出现github的用户名，说明成功连接</p></li><li><p>安装Hexo，新建一个文件夹作为你的博客文件存放地址，右键<code>git bash here</code>，通过以下命令安装hexo，<code>hexo -v</code>验证是否安装成功</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">npm</span> i hexo-cli -ghexo -v<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li><li><p>初始化，生成我们的网站，依次完成下列步骤，然后打开<a href="http://localhost:4000/，可以看到我们的博客啦" target="_blank" rel="noopener">http://localhost:4000/，可以看到我们的博客啦</a></p><pre class="line-numbers language-bash"><code class="language-bash">hexo init <span class="token comment" spellcheck="true">#初始化博客文件夹</span><span class="token function">npm</span> <span class="token function">install</span> <span class="token comment" spellcheck="true">#安装必备组件</span>hexo g <span class="token comment" spellcheck="true">#生成静态网页</span>hexo s <span class="token comment" spellcheck="true">#打开本地服务器</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>打开博客根目录的<code>_config.yml</code>文件，将xxx. github.io配置尽量</p><pre class="line-numbers language-yaml"><code class="language-yaml"><span class="token key atrule">deploy</span><span class="token punctuation">:</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> git <span class="token key atrule">repository</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/michaelyyq/michaelyyq.github.io <span class="token key atrule">branch</span><span class="token punctuation">:</span> master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>写文章和发布文章，安装git扩展<code>npm i hexo-deployer-git</code> ，然后通过以下命令就可以新建一篇文章，写完文章，可以在<code>source\_posts</code>的目录下发现一个<code>.md</code>文件就是新建的博客文件和一个目录，目录用来存放图片等数据，编写完Markdown文件，通过<code>hexo g</code>生成网页，<code>hexo s</code>查看本地预览，<code>hexo d</code>上传到github上</p><pre class="line-numbers language-bash"><code class="language-bash">hexo new post <span class="token string">"article title"</span> <span class="token comment" spellcheck="true">#新建一篇文章</span>hexo g <span class="token comment" spellcheck="true">#生成静态网页</span>hexo s <span class="token comment" spellcheck="true"># 本地预览</span>hexo d <span class="token comment" spellcheck="true">#上传到github</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li></ol><h4 id="主题"><a href="#主题" class="headerlink" title="主题"></a>主题</h4><p> 通过以上操作得到博客主页过于简单，不符合我们搭建博客的“zhuangbi初衷”，一个好的主题，才能满足我们的需求，可以到<a href="https://hexo.io/themes/" target="_blank" rel="noopener">Hexo主题</a>搜索你想要的主题，以下介绍一个大神推荐的主题<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank" rel="noopener">matery</a></p><ol><li><p>快速搭建matery主题，借用大神<a href="https://godweiyang.com/2018/04/13/hexo-blog/#toc-heading-1" target="_blank" rel="noopener">韦阳</a>提供的博客源码<a href="https://github.com/godweiyang/hexo-matery-modified" target="_blank" rel="noopener">https://github.com/godweiyang/hexo-matery-modified</a></p></li><li><p>获取博客源代码，解压<code>node_modules.zip</code>后删除压缩包</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">git</span> clone [email protected]:godweiyang/hexo-matery-modified.git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>然后修改以下文件，配置个人信息</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true">#主页重要的配置</span>_config.ymldeploy栏目 <span class="token comment" spellcheck="true">#配置仓库地址</span>baidu_url_submit栏目 <span class="token comment" spellcheck="true">#配置token</span><span class="token comment" spellcheck="true"># source 目录下需要修改的地方</span>source/about/index.md <span class="token comment" spellcheck="true">#这里是<关于>的个人信息以及date修改</span>source/contact/index.md <span class="token comment" spellcheck="true">#这里是<联系></span>source/friends/index.md source/_data/friends.json <span class="token comment" spellcheck="true">#这里是<友情链接>下的链接卡</span>source/_data/musics.json <span class="token comment" spellcheck="true">#个人要存放的音乐</span>source/_posts/ <span class="token comment" spellcheck="true">#删除已有的博客文件</span><span class="token comment" spellcheck="true"># themes 目录下需要修改的地方</span>themes/matery/_config.yml <span class="token comment" spellcheck="true">#主题重要配置，主要是打开或关掉某些主题功能，将韦阳大神自定义的一些功能关闭（比如个人简历/项目/技能）</span>themes/matery/source/favicon.png <span class="token comment" spellcheck="true"># logo图片</span>themes/matery/source/medias/logo.png <span class="token comment" spellcheck="true"># logo图片</span>themes/matery/source/medias/contact.png <span class="token comment" spellcheck="true"># 二维码图片</span>themes/matery/source/medias/avatars/avatar.png <span class="token comment" spellcheck="true"># 个人写真图片</span>themes/matery/source/medias/<span class="token punctuation">[</span>banner,featureimages,music,video<span class="token punctuation">]</span> <span class="token comment" spellcheck="true">#都是网页上显示会用到的媒体文件，可以结合_config.yml替换成自己想用的图片</span>themes\matery\layout\_partial/footer.ejs <span class="token comment" spellcheck="true">#是博客主页下方显示的内容，修改博客建站时间 如var t1 = Date.UTC(2020, 11, 18, 00, 00, 00);</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>写文章和发布文章</p><p> 通过以上的操作，博客就得到自己个性化的博客了，可以通过hexo三连<code>hexo g</code> <code>hexo s</code> <code>hexo d</code>发布自己的文章了。其他更多的主题功能，可以阅读<a href="https://godweiyang.com/2018/04/13/hexo-blog/#toc-heading-1" target="_blank" rel="noopener">韦阳</a>的博客，诸如配置留言板/评论区/动漫人物/鼠标点击动画/百度统计/雪花特效/音乐/MV/添加水印等功能，这些功能我们一般只需要在相关配置功能打开就可以了，最多配置类似百度的token。此外，建议将图片放在图床网站上，比如<a href="https://link.zhihu.com/?target=https%3A//sm.ms/" target="_blank" rel="noopener">https://sm.ms</a>，免费，单张图片不超过5M，一次上传不超过10张，能提供5G的空间，把图片放在网上，避免每次发布文章的时候上传图片文件很慢，而且github上大文件不能超过50M。</p></li></ol><h4 id="域名"><a href="#域名" class="headerlink" title="域名"></a>域名</h4><p> 通过上述的配置，我们得到的是github免费提供的域名<code>xxx.github.io</code>，拥有一个类似<code>www.xxx.com</code>的域名，使得博客网站更专业更上档次，可以上百度智能云/阿里云等服务平台找到域名服务进行选择购买。购买域名需要进行实名认证，有必要的还需要进行备案。</p><ol><li>购买域名，实名认证</li></ol><p><img src="https://i.loli.net/2020/11/22/wmMKpX546kznrEj.png" alt="image-20201122152653524"></p><ol start="2"><li>增加<code>CNAME</code>域名记录<img src="https://i.loli.net/2020/11/22/ZnOVhwSyF2JQdz4.png" alt="image-20201122152811892"></li><li>在github上添加域名，在<code>xxx.github.io</code>的<code>settings</code>中找到<code>Custom domain</code>，这里每一通过<code>hexo d</code>更新完之后需要重新设置<img src="https://i.loli.net/2020/11/22/JWBXROlKLE6tGPD.png" alt="image-20201122152955386"></li><li>在博客项目<code>source</code>中添加域名记录<code>CNAME</code>，这样就设置完你的域名了<img src="https://i.loli.net/2020/11/22/BubNPqk2QSp1Mx3.png" alt="image-20201122153244421"></li></ol><h4 id="Notion域名绑定"><a href="#Notion域名绑定" class="headerlink" title="Notion域名绑定"></a>Notion域名绑定</h4><p> 当你有一个自己的基于其它平台的主页时，比如CSDN/博客园等，可以将你的主页和域名绑定在一起，你就可以通过类似<code>www.xxx.com</code>来访问你的主页了，这里以Notion（<a href="https://www.notion.so/" target="_blank" rel="noopener">Notion</a>是一个基于数据库，能够方便管理知识/工作/项目，在线的笔记工具。）作为例子，参照<a href="https://segmentfault.com/a/1190000021314073" target="_blank" rel="noopener">这个做法</a></p><ol><li><p>先上<a href="https://www.cloudflare.com/" target="_blank" rel="noopener">Cloudflare</a>注册一个账号，找到Cloudflare提供的nameserver</p></li><li><p>将Cloudflare提供的nameserver，替换购买域名的DNS服务器<img src="https://i.loli.net/2020/11/22/buo36gcBIAVsUdL.png" alt="image-20201122155258897"></p></li><li><p>在域名解析里添加一条A记录，主机记录IP随便填<img src="https://i.loli.net/2020/11/22/r3KoSgfdXsk6G7A.png" alt="image-20201122160133296"></p></li><li><p>到收到邮件后，你的Cloudflare的Overview页面出现这个，就更改nameservers成功了<img src="https://i.loli.net/2020/11/22/cqyShpTHvwJnCjY.jpg" alt="824120164-fce0127eb2f1fb5c_articlex"></p></li><li><p>在Cloudflare的DNS页也添加一条A记录</p></li><li><p>点击<code>Workers</code> ><code>Mange Workers</code> > <code>Create a Worker</code><img src="https://i.loli.net/2020/11/22/8OH91zmYXtuKkGq.png" alt="image-20201122160714209"></p><hr><p><img src="https://i.loli.net/2020/11/22/hgjwy91k4lVur2P.png" alt="image-20201122161051886"></p></li><li><p>将下面脚本添加到上图左边的Script框中，<code>MY_DOMAIN</code>和<code>START_PAGE</code>换成自己的，点击<code>save and deploy</code></p><pre class="line-numbers language-json"><code class="language-json"> const MY_DOMAIN = <span class="token string">"example.com"</span> const START_PAGE = <span class="token string">"https://www.notion.so/xxx/Home-Base-27455f83e51748c8993e9ae6184ccc9a"</span> addEventListener('fetch'<span class="token punctuation">,</span> event => <span class="token punctuation">{</span> event.respondWith(fetchAndApply(event.request<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> const corsHeaders = <span class="token punctuation">{</span> <span class="token property">"Access-Control-Allow-Origin"</span><span class="token operator">:</span> <span class="token string">"*"</span><span class="token punctuation">,</span> <span class="token property">"Access-Control-Allow-Methods"</span><span class="token operator">:</span> <span class="token string">"GET, HEAD, POST,PUT, OPTIONS"</span><span class="token punctuation">,</span> <span class="token property">"Access-Control-Allow-Headers"</span><span class="token operator">:</span> <span class="token string">"Content-Type"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> function handleOptions(request<span class="token punctuation">)</span> <span class="token punctuation">{</span> if (request.headers.get(<span class="token string">"Origin"</span><span class="token punctuation">)</span> !== <span class="token null">null</span> && request.headers.get(<span class="token string">"Access-Control-Request-Method"</span><span class="token punctuation">)</span> !== <span class="token null">null</span> && request.headers.get(<span class="token string">"Access-Control-Request-Headers"</span><span class="token punctuation">)</span> !== <span class="token null">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> // Handle CORS pre-flight request. return new Response(<span class="token null">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> headers<span class="token operator">:</span> corsHeaders <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> else <span class="token punctuation">{</span> // Handle standard OPTIONS request. return new Response(<span class="token null">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> headers<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"Allow"</span><span class="token operator">:</span> <span class="token string">"GET, HEAD, POST, PUT, OPTIONS"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> async function fetchAndApply(request<span class="token punctuation">)</span> <span class="token punctuation">{</span> if (request.method === <span class="token string">"OPTIONS"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> return handleOptions(request<span class="token punctuation">)</span> <span class="token punctuation">}</span> let url = new URL(request.url<span class="token punctuation">)</span> let response if (url.pathname.startsWith(<span class="token string">"/app"</span><span class="token punctuation">)</span> && url.pathname.endsWith(<span class="token string">"js"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> response = await fetch(`https<span class="token operator">:</span>//www.notion.so$<span class="token punctuation">{</span>url.pathname<span class="token punctuation">}</span>`<span class="token punctuation">)</span> let body = await response.text(<span class="token punctuation">)</span> try <span class="token punctuation">{</span> response = new Response(body.replace(/www.notion.so/g<span class="token punctuation">,</span> MY_DOMAIN<span class="token punctuation">)</span>.replace(/notion.so/g<span class="token punctuation">,</span> MY_DOMAIN<span class="token punctuation">)</span><span class="token punctuation">,</span> response<span class="token punctuation">)</span> // response = new Response(response.body<span class="token punctuation">,</span> response<span class="token punctuation">)</span> response.headers.set('Content-Type'<span class="token punctuation">,</span> <span class="token string">"application/x-javascript"</span><span class="token punctuation">)</span> console.log(<span class="token string">"get rewrite app.js"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> catch (err<span class="token punctuation">)</span> <span class="token punctuation">{</span> console.log(err<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> else if ((url.pathname.startsWith(<span class="token string">"/api"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> response = await fetch(`https<span class="token operator">:</span>//www.notion.so$<span class="token punctuation">{</span>url.pathname<span class="token punctuation">}</span>`<span class="token punctuation">,</span> <span class="token punctuation">{</span> body<span class="token operator">:</span> request.body<span class="token punctuation">,</span> // must match 'Content-Type' header headers<span class="token operator">:</span> <span class="token punctuation">{</span> 'content-type'<span class="token operator">:</span> 'application/json<span class="token punctuation">;</span>charset=UTF<span class="token number">-8</span>'<span class="token punctuation">,</span> 'user-agent'<span class="token operator">:</span> 'Mozilla/<span class="token number">5.0</span> (Macintosh<span class="token punctuation">;</span> Intel Mac OS X 10_13_6<span class="token punctuation">)</span> AppleWebKit/<span class="token number">537.36</span> (KHTML<span class="token punctuation">,</span> like Gecko<span class="token punctuation">)</span> Chrome/<span class="token number">73.0</span>.<span class="token number">3683.103</span> Safari/<span class="token number">537.36</span>' <span class="token punctuation">}</span><span class="token punctuation">,</span> method<span class="token operator">:</span> <span class="token string">"POST"</span><span class="token punctuation">,</span> // *GET<span class="token punctuation">,</span> POST<span class="token punctuation">,</span> PUT<span class="token punctuation">,</span> DELETE<span class="token punctuation">,</span> etc. <span class="token punctuation">}</span><span class="token punctuation">)</span> response = new Response(response.body<span class="token punctuation">,</span> response<span class="token punctuation">)</span> response.headers.set('Access-Control-Allow-Origin'<span class="token punctuation">,</span> <span class="token string">"*"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> else if (url.pathname === `/`<span class="token punctuation">)</span> <span class="token punctuation">{</span> let pageUrlList = START_PAGE.split(<span class="token string">"/"</span><span class="token punctuation">)</span> let redrictUrl = `https<span class="token operator">:</span>//$<span class="token punctuation">{</span>MY_DOMAIN<span class="token punctuation">}</span>/$<span class="token punctuation">{</span>pageUrlList<span class="token punctuation">[</span>pageUrlList.length<span class="token number">-1</span><span class="token punctuation">]</span><span class="token punctuation">}</span>` return Response.redirect(redrictUrl<span class="token punctuation">,</span> <span class="token number">301</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> else <span class="token punctuation">{</span> response = await fetch(`https<span class="token operator">:</span>//www.notion.so$<span class="token punctuation">{</span>url.pathname<span class="token punctuation">}</span>`<span class="token punctuation">,</span> <span class="token punctuation">{</span> body<span class="token operator">:</span> request.body<span class="token punctuation">,</span> // must match 'Content-Type' header headers<span class="token operator">:</span> request.headers<span class="token punctuation">,</span> method<span class="token operator">:</span> request.method<span class="token punctuation">,</span> // *GET<span class="token punctuation">,</span> POST<span class="token punctuation">,</span> PUT<span class="token punctuation">,</span> DELETE<span class="token punctuation">,</span> etc. <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> return response <span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>返回到<code>Workers</code>,点击<code>Add route</code>添加通配符路径<img src="https://i.loli.net/2020/11/22/NRgZOJCQWVGIteU.png" alt="image-20201122161945814"></p></li><li><p>恭喜你完成了域名绑定的设置</p></li></ol>]]></content>
<categories>
<category> 搭建网站 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> Cloudflare </tag>
<tag> github </tag>
<tag> git </tag>
<tag> Notion </tag>
<tag> matery </tag>
</tags>
</entry>
</search>