手把手教你搭建博客

{"value":"由于 github 访问不太稳定，觉得将博客迁移到 Amazon 上。可以借助 Amazon 存储的功能。\n\n\n\n- 为什么选择 hexo\n- 生成页面速度快\n- 支持 markdown\n- 一键部署\n- 超强的扩展性\n- 海量的插件\n\n#### **创建博客**\n```\n# 安装\nnpm install hexo-cli -g\n\n# 创建博客\nhexo init myblog\ncd myblog\nnpm install\n\n# 本地运行\nhexo server\n```\n\n这短短的几步，博客便创建成功了。\n\n\n\n### **安装部署工具**\n```\n# 安装\nnpm install hexo-deployer-Amazon Web Services-s3 --save-dev\n```\n\n```\n# 将部署配置放入 _config.yml\ndeploy:\n type: Amazon Web Services-s3 # 插件的名字\n region: us-east-1 # 存储桶所在区域\n bucket: my-bucket # 存储桶名字\n```\n\n### **Amazon 使用指南**\n注册地址：[https://aws.amazon.com/cn/free/?trk=92861c17-b0b0-4e0a-9f78-8d60bc5e2fe2&sc_channel=ba&all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all](https://aws.amazon.com/cn/free/?trk=92861c17-b0b0-4e0a-9f78-8d60bc5e2fe2&sc_channel=ba&all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all)\n实操文档：[https://aws.amazon.com/cn/getting-started/hands-on/how-to-host-static-website-on-cloud/?trk=ed0d7922-914e-49cb-8a1d-d714e5133565&sc_channel=ba](https://aws.amazon.com/cn/getting-started/hands-on/how-to-host-static-website-on-cloud/?trk=ed0d7922-914e-49cb-8a1d-d714e5133565&sc_channel=ba)\n### **Amazon 存储介绍**\nS3 是一种对象存储服务，提供行业领先的可扩展性、数据可用性、安全性和性能。首年使用会有 5 GB 的免费存储空空间。\n\n接下来，就需要我们在 Amazon 上创建存储。\n\n### **创建存储桶**\n\n\n\n保存后\n\n\n\n此时，更新 deploy 配置\n\n```\n# 将部署配置放入 _config.yml\ndeploy:\n type: Amazon Web Services-s3 # 插件的名字\n region: ap-northeast-1 # 存储桶所在区域\n bucket: robinblog # 存储桶名字\n```\n\n### **凭证**\n凭证的作用是为了获得 Amazon s3 存储的控制权限，便于部署静态网站。进入[官方文档](https://docs.aws.amazon.com/zh_cn/sdk-for-javascript/v2/developer-guide/configuring-the-jssdk.html)，需要生成凭证、配置策略、配置凭证。\n\n#### **生成凭证**\n1. 登录 Amazon Management Console，单击 [https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fus-east-1.console.aws.amazon.com%2Fiam%2F%3Fregion%3Dus-east-1%26state%3DhashArgs%2523%26isauthcode%3Dtrue&client_id=arn%3Aaws%3Aiam%3A%3A015428540659%3Auser%2Fiam&forceMobileApp=0&code_challenge=ywtenoQY-KbddCLWkKCBfLRXaU6GykgCu0F63fnSfYY&code_challenge_method=SHA-256](https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fus-east-1.console.aws.amazon.com%2Fiam%2F%3Fregion%3Dus-east-1%26state%3DhashArgs%2523%26isauthcode%3Dtrue&client_id=arn%3Aaws%3Aiam%3A%3A015428540659%3Auser%2Fiam&forceMobileApp=0&code_challenge=ywtenoQY-KbddCLWkKCBfLRXaU6GykgCu0F63fnSfYY&code_challenge_method=SHA-256) 打开 IAM 控制台。\n2. 在导航窗格中，选择 Users (用户)。\n3. 选择要为其创建访问密钥的用户的名称，然后选择 Security credentials (安全凭证) 选项卡。\n4. 在 Access keys(访问密钥) 部分，选择 Create access key (创建访问密钥)。\n5. 要查看新访问密钥对，请选择 Show (显示)。关闭此对话框后，您将无法再次访问该秘密访问密钥。您的凭证与下面类似：\n\n- 访问密钥 ID：AKIAIOSFODNN7EXAMPLE\n- 秘密访问密钥：wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY\n5. 要下载密钥对，请选择 Download .csv file (下载 .csv 文件)。将密钥存储在安全位置。关闭此对话框后，您将无法再次访问该秘密访问密钥。\n6. 下载 .csv 文件之后，选择 Close (关闭)。在创建访问密钥时，预设情况下，密钥对处于活动状态，并且您可以立即使用此密钥对。\n7. 凭证生成后，还必须拥有执行所需 IAM 操作的权限。具体配置流程，请参阅 IAM 用户指南中的[访问 IAM 资源所需的权限](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_permissions-required.html)，下面是我配置的相关策略\n\n### **配置策略**\n```\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [\n {\n \"Sid\": \"VisualEditor0\",\n \"Effect\": \"Allow\",\n \"Action\": [\n \"s3:*\",\n \"s3-object-lambda:*\"\n ],\n \"Resource\": \"*\"\n }\n ]\n}\n```\n\n### **配置凭证**\n亚马逊云科技提供多种配置凭证的方式\n\n1. 从加载 Amazon Identity and Access Management适用于 Amazon EC2 的 (IAM) 角色\n2. 从共享凭证文件 (~/.aws/credentials) 加载\n3. 从环境变量加载\n4. 从磁盘上的 JSON 文件加载\n5. JavaScript 开发工具包提供的其他 credential-provider 类\n\n我采取了方式2 ，从共享凭证文件 (~/.aws/credentials) 加载\n\n```\n[default]\naws_access_key_id = <YOUR_ACCESS_KEY_ID>\naws_secret_access_key = <YOUR_SECRET_ACCESS_KEY>\n```\n\n看文档发现，可以通过 Amazon Web Services CLI 配置凭证，安装操作官方文档很详细看这里，我们重点介绍下配置凭证的过程。\n\n首次安装成功，命令行执行 ```\nAmazon Web Services configure``` 配置如下：\n\n\n\n配置成功后，同样会在 ```\n~/.aws/credentials``` 文件中创建对应的字段\n\n\n\n至此，配置完成。\n\n### **部署**\n```\n`# 构建\nnpm run build\n```\n\n\n```\n部署\nnpm run deploy`\n```\n\n\n发现报错，```\nThe bucket does not allow ACLs```，还需要在存储中开启```\n ACLs```\n\n\n\n接下来要关闭「阻止共有访问操作」\n\n\n\n再执行 ```\nnpm run deploy```，部署成功\n\n\n\n\n\n### **访问配置**\n部署成功后，开启静态网站托管功能\n\n\n\n访问域名 [http://robinblog.s3-website-ap-northeast-1.amazonaws.com/](http://robinblog.s3-website-a...) 成功\n\n\n\n### **总结**\n部署确实很方便，但文档还是不太完善，文档中提到「获取凭证」的操作，其中配置 IAM 操作权限也是关键步骤，在文档中确一笔带过，如下图：\n\n\n\n在这块花费了不少时间。\n\n更多实操过程可参考 [https://aws.amazon.com/cn/getting-started/?nc2=h_ql_le_gs&trk=4601add5-b05e-40e5-86a4-84b8eec3a582&sc_channel=ba](https://aws.amazon.com/cn/getting-started/?nc2=h_ql_le_gs&trk=4601add5-b05e-40e5-86a4-84b8eec3a582&sc_channel=ba)\n\n","render":"<p>由于 github 访问不太稳定，觉得将博客迁移到 Amazon 上。可以借助 Amazon 存储的功能。</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/b8acf8dcc4e347989ed214458e5309ce_image.png\" alt=\"image.png\" /></p>\n<ul>\n<li>为什么选择 hexo</li>\n<li>生成页面速度快</li>\n<li>支持 markdown</li>\n<li>一键部署</li>\n<li>超强的扩展性</li>\n<li>海量的插件</li>\n</ul>\n<h4><a id=\"_11\"></a><strong>创建博客</strong></h4>\n<pre><code class=\"lang-\"># 安装\nnpm install hexo-cli -g\n\n# 创建博客\nhexo init myblog\ncd myblog\nnpm install\n\n# 本地运行\nhexo server\n</code></pre>\n<p>这短短的几步，博客便创建成功了。</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/5d2f159e05ce44ef913aeeb1bbd4315a_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_29\"></a><strong>安装部署工具</strong></h3>\n<pre><code class=\"lang-\"># 安装\nnpm install hexo-deployer-Amazon Web Services-s3 --save-dev\n</code></pre>\n<pre><code class=\"lang-\"># 将部署配置放入 _config.yml\ndeploy:\n type: Amazon Web Services-s3 # 插件的名字\n region: us-east-1 # 存储桶所在区域\n bucket: my-bucket # 存储桶名字\n</code></pre>\n<h3><a id=\"Amazon__43\"></a><strong>Amazon 使用指南</strong></h3>\n<p>注册地址：<a href=\"https://aws.amazon.com/cn/free/?trk=92861c17-b0b0-4e0a-9f78-8d60bc5e2fe2&amp;sc_channel=ba&amp;all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%20Tier%20Types=*all&amp;awsf.Free%20Tier%20Categories=*all\" target=\"_blank\">https://aws.amazon.com/cn/free/?trk=92861c17-b0b0-4e0a-9f78-8d60bc5e2fe2&amp;sc_channel=ba&amp;all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%20Tier%20Types=*all&amp;awsf.Free%20Tier%20Categories=*all</a><br />\n实操文档：<a href=\"https://aws.amazon.com/cn/getting-started/hands-on/how-to-host-static-website-on-cloud/?trk=ed0d7922-914e-49cb-8a1d-d714e5133565&amp;sc_channel=ba\" target=\"_blank\">https://aws.amazon.com/cn/getting-started/hands-on/how-to-host-static-website-on-cloud/?trk=ed0d7922-914e-49cb-8a1d-d714e5133565&amp;sc_channel=ba</a></p>\n<h3><a id=\"Amazon__46\"></a><strong>Amazon 存储介绍</strong></h3>\n<p>S3 是一种对象存储服务，提供行业领先的可扩展性、数据可用性、安全性和性能。首年使用会有 5 GB 的免费存储空空间。</p>\n<p>接下来，就需要我们在 Amazon 上创建存储。</p>\n<h3><a id=\"_51\"></a><strong>创建存储桶</strong></h3>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/2ada38b569fb4744ba352e4c69354729_image.png\" alt=\"image.png\" /></p>\n<p>保存后</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/38bfb1ada6dd44048a0661ef97177071_image.png\" alt=\"image.png\" /></p>\n<p>此时，更新 deploy 配置</p>\n<pre><code class=\"lang-\"># 将部署配置放入 _config.yml\ndeploy:\n type: Amazon Web Services-s3 # 插件的名字\n region: ap-northeast-1 # 存储桶所在区域\n bucket: robinblog # 存储桶名字\n</code></pre>\n<h3><a id=\"_69\"></a><strong>凭证</strong></h3>\n<p>凭证的作用是为了获得 Amazon s3 存储的控制权限，便于部署静态网站。进入<a href=\"https://docs.aws.amazon.com/zh_cn/sdk-for-javascript/v2/developer-guide/configuring-the-jssdk.html\" target=\"_blank\">官方文档</a>，需要生成凭证、配置策略、配置凭证。</p>\n<h4><a id=\"_72\"></a><strong>生成凭证</strong></h4>\n<ol>\n<li>登录 Amazon Management Console，单击 <a href=\"https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fus-east-1.console.aws.amazon.com%2Fiam%2F%3Fregion%3Dus-east-1%26state%3DhashArgs%2523%26isauthcode%3Dtrue&amp;client_id=arn%3Aaws%3Aiam%3A%3A015428540659%3Auser%2Fiam&amp;forceMobileApp=0&amp;code_challenge=ywtenoQY-KbddCLWkKCBfLRXaU6GykgCu0F63fnSfYY&amp;code_challenge_method=SHA-256\" target=\"_blank\">https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fus-east-1.console.aws.amazon.com%2Fiam%2F%3Fregion%3Dus-east-1%26state%3DhashArgs%2523%26isauthcode%3Dtrue&amp;client_id=arn%3Aaws%3Aiam%3A%3A015428540659%3Auser%2Fiam&amp;forceMobileApp=0&amp;code_challenge=ywtenoQY-KbddCLWkKCBfLRXaU6GykgCu0F63fnSfYY&amp;code_challenge_method=SHA-256</a> 打开 IAM 控制台。</li>\n<li>在导航窗格中，选择 Users (用户)。</li>\n<li>选择要为其创建访问密钥的用户的名称，然后选择 Security credentials (安全凭证) 选项卡。</li>\n<li>在 Access keys(访问密钥) 部分，选择 Create access key (创建访问密钥)。</li>\n<li>要查看新访问密钥对，请选择 Show (显示)。关闭此对话框后，您将无法再次访问该秘密访问密钥。您的凭证与下面类似：</li>\n</ol>\n<ul>\n<li>访问密钥 ID：AKIAIOSFODNN7EXAMPLE</li>\n<li>秘密访问密钥：wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY</li>\n</ul>\n<ol start=\"5\">\n<li>要下载密钥对，请选择 Download .csv file (下载 .csv 文件)。将密钥存储在安全位置。关闭此对话框后，您将无法再次访问该秘密访问密钥。</li>\n<li>下载 .csv 文件之后，选择 Close (关闭)。在创建访问密钥时，预设情况下，密钥对处于活动状态，并且您可以立即使用此密钥对。</li>\n<li>凭证生成后，还必须拥有执行所需 IAM 操作的权限。具体配置流程，请参阅 IAM 用户指南中的<a href=\"https://docs.aws.amazon.com/IAM/latest/UserGuide/access_permissions-required.html\" target=\"_blank\">访问 IAM 资源所需的权限</a>，下面是我配置的相关策略</li>\n</ol>\n<h3><a id=\"_85\"></a><strong>配置策略</strong></h3>\n<pre><code class=\"lang-\">{\n &quot;Version&quot;: &quot;2012-10-17&quot;,\n &quot;Statement&quot;: [\n {\n &quot;Sid&quot;: &quot;VisualEditor0&quot;,\n &quot;Effect&quot;: &quot;Allow&quot;,\n &quot;Action&quot;: [\n &quot;s3:*&quot;,\n &quot;s3-object-lambda:*&quot;\n ],\n &quot;Resource&quot;: &quot;*&quot;\n }\n ]\n}\n</code></pre>\n<h3><a id=\"_103\"></a><strong>配置凭证</strong></h3>\n<p>亚马逊云科技提供多种配置凭证的方式</p>\n<ol>\n<li>从加载 Amazon Identity and Access Management适用于 Amazon EC2 的 (IAM) 角色</li>\n<li>从共享凭证文件 (~/.aws/credentials) 加载</li>\n<li>从环境变量加载</li>\n<li>从磁盘上的 JSON 文件加载</li>\n<li>JavaScript 开发工具包提供的其他 credential-provider 类</li>\n</ol>\n<p>我采取了方式2 ，从共享凭证文件 (~/.aws/credentials) 加载</p>\n<pre><code class=\"lang-\">[default]\naws_access_key_id = &lt;YOUR_ACCESS_KEY_ID&gt;\naws_secret_access_key = &lt;YOUR_SECRET_ACCESS_KEY&gt;\n</code></pre>\n<p>看文档发现，可以通过 Amazon Web Services CLI 配置凭证，安装操作官方文档很详细看这里，我们重点介绍下配置凭证的过程。</p>\n<p>首次安装成功，命令行执行 <code> Amazon Web Services configure</code> 配置如下：</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/40f92c0e62f44e43a9b2096cde813c7d_image.png\" alt=\"image.png\" /></p>\n<p>配置成功后，同样会在 <code> ~/.aws/credentials</code> 文件中创建对应的字段</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/c96300ad0cbf412b894c75ec944086cb_image.png\" alt=\"image.png\" /></p>\n<p>至此，配置完成。</p>\n<h3><a id=\"_134\"></a><strong>部署</strong></h3>\n<pre><code class=\"lang-\">`# 构建\nnpm run build\n</code></pre>\n<pre><code class=\"lang-\">部署\nnpm run deploy`\n</code></pre>\n<p>发现报错，<code> The bucket does not allow ACLs</code>，还需要在存储中开启<code> ACLs</code></p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/c33e646ab07d4e6fad284982d70316b5_image.png\" alt=\"image.png\" /></p>\n<p>接下来要关闭「阻止共有访问操作」</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/c39eb8a7820b4bdc9980e53333049a3e_image.png\" alt=\"image.png\" /></p>\n<p>再执行 <code> npm run deploy</code>，部署成功</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/593784436e38425ea7aff3093fc7b9c2_image.png\" alt=\"image.png\" /></p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/a14d29555bfc4210b2a23bfa9c49aeab_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_164\"></a><strong>访问配置</strong></h3>\n<p>部署成功后，开启静态网站托管功能</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/de6060abefb643fa80046b5f321b6f9c_image.png\" alt=\"image.png\" /></p>\n<p>访问域名 <a href=\"http://robinblog.s3-website-a...\" target=\"_blank\">http://robinblog.s3-website-ap-northeast-1.amazonaws.com/</a> 成功</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/af21ee15928f490780b2f6d5d246117e_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_173\"></a><strong>总结</strong></h3>\n<p>部署确实很方便，但文档还是不太完善，文档中提到「获取凭证」的操作，其中配置 IAM 操作权限也是关键步骤，在文档中确一笔带过，如下图：</p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/73cd31e5a34340fab9c663a37a638a2d_image.png\" alt=\"image.png\" /></p>\n<p>在这块花费了不少时间。</p>\n<p>更多实操过程可参考 <a href=\"https://aws.amazon.com/cn/getting-started/?nc2=h_ql_le_gs&amp;trk=4601add5-b05e-40e5-86a4-84b8eec3a582&amp;sc_channel=ba\" target=\"_blank\">https://aws.amazon.com/cn/getting-started/?nc2=h_ql_le_gs&amp;trk=4601add5-b05e-40e5-86a4-84b8eec3a582&amp;sc_channel=ba</a></p>\n<p><img src=\"https://awsdevweb.s3.cn-north-1.amazonaws.com.cn/f8b22d160f7f430faaa25e9ff1591dc8_Builder%20%E4%B8%93%E6%A0%8F1.jpg\" alt=\"Builder 专栏1.jpg\" /></p>\n"}