Github-Pages

详情hugo：官网地址 Go-lang：官网地址 Git：官网地址 辅助工具 -> Github Proxy：官网地址 文章适宜有肯定根底的，最起码你能看懂我在讲什么，并不适宜小白操作。（局部略写，看不懂能够Google等）配置环境咱们先下载好 hugo，这里我举荐间接去 Github 下载打包好的，或者你能够通过官网文档查问更多下载方式。下载好之后解压缩到文件夹外面，并增加到零碎变量。检测装置是否胜利：hugo version返回 Go-lang 官网 装置适宜本人的版本。装置 git 工具，返回 Git 官网 装置适宜本人的版本。初始化我的项目咱们创立一个 Github 空仓库。通过 hugo new site <name> 初始化创立一个 hugo 我的项目。编辑我的项目咱们去 官网 找到本人喜爱的皮肤。查看 Go-lang 是否装置胜利：go version。我抉择的主题是：Paper应用 Git Submodule 指令装置皮肤git submodule add https://github.com/nanxiaobei/hugo-paper.git themes/paper输出 hugo server -t paper 返回地址 localhost:1313 能够进行预览。Tips：参数 -t paper是指定 paper 这个皮肤进行预览。新建一篇文章 hugo new post/test.mdTips：这个命令在 content 文件夹下创立了 post 文件夹，并写入一个 Markdown 文章。咱们能够通过任何 Markdown 编辑器 或者 LINUX/Mac 下的 VIM 编辑器进行编辑 content/post/test.md。进去的时候咱们发现了曾经为咱们编辑好了一部分内容：title: "Test"date: 2022-11-26T11:58:56+08:00draft: true咱们间接在上面开始文章就行。 ...

鉴于我公布/行将公布的 npm 包越来越多，我决定用 github 的 actions 性能来实现 npm 包主动公布，过程也比较顺利，遂决定写一篇流水账记录下主动公布的实现，不便当前用到的时候翻阅。 起步以 react-m-editor 这个组件为例子，公布过程个别分位两步以下两步： 打包组件，公布 npm 组件打包示例，公布 github page 示例界面上面咱们就依照下面两个步骤来实现目标。咱们先在github网站上的我的项目下找到 Actions 菜单栏，这边官网会提供一堆 Workflow 供咱们抉择，咱们从中找到一个 Publish Node.js Package，会主动帮咱们生成一份配置文件 .github/workflow/npm-publish.yml，内容如下： # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packagesname: Node.js Packageon: release: types: [created]jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: 14 - run: npm ci - run: npm test publish-npm: needs: build runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: 14 registry-url: https://registry.npmjs.org/ - run: npm ci - run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.npm_token}}// ... 还有一部分用于公布 githua package 的代码// ... 因为用不到所以间接将这部分删除了上面咱们依据具体的公布步骤批改配置文件。 ...

你好，我是悦创。 最近在给流沙团队（长期招收编程一对一学员的团队），搭建动态网站。呈现主动构建后 CNAME 失落的问题。 而后网络上也有相似的问题： GitHub不是有动态托管性能么，就是 github pages，而后能够自定义域名，其实就是生成一个 CNAME 文件 而后像是有一些主动公布，比方 Travis CI 和 Github Action而后我我发现有一个独特的问题，主动公布是每次间接笼罩上次的文件，也就是说，每次公布，CNAME 都没有了 这个问题怎么解决？ 我是间接写的主动话脚本，然而测试了脚本编写 CNAME 莫名其妙的失败了。最初找到一个办法：间接在 Public 文件夹上面放一个 CNAME 即可！ AI悦创·推出辅导班啦，包含「Python 语言辅导班、C++辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」，全部都是一对一教学：一对一辅导 + 一对一答疑 + 安排作业 + 我的项目实际等。QQ、微信在线，随时响应！V：Jiabcdefh

什么是插件Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大. 本文将全面介绍插件的相关知识并重点介绍插件开发的全流程,只有熟悉插件开发流程才能做到有的放矢,心中有数,进而开发出自己的插件. 关于插件请参考 Gitbook 入门教程高级进阶系列文章,本文重点讲解开发 Gitbook 的基本流程. gitbook 入门教程之插件介绍gitbook 入门教程之实用插件gitbook 入门教程之主题插件如何发现插件您可以在Gitbook官网轻松搜索插件,也可以在npmjs 官网搜索 gitbook-plugin-<name> 插件. 目前 Gitbook 官方已不再为维护插件网站,只能通过 npmjs 发现 Gitbook 插件.如何安装插件一旦你找到你想要安装的插件,你需要将它添加到你的 book.json 配置文件,如果没有该文件则自行创建. { "plugins": ["myPlugin", "anotherPlugin"]}您还可以使用以下命令指定特定版本: myPlugin@0.3.1 .默认不填写版本的情况下,GitBook 使用最新版本(兼容版本)的插件. 安装插件如果是官网在线环境,网站会自动帮你安装插件.如果是在本地环境,直接运行 gitbook install 来安装插件.$ gitbook install或者使用 npm 提前下载插件再安装到本地项目: $ npm install gitbook-plugin-<name>$ gitbook install配置插件插件的配置在 book.json 配置文件中的 pluginsConfig 属性中(如果没有该属性请自行创建),安装插件时,最好浏览插件的文档了解相关选项的详细信息. { "plugins": ["github"], "pluginsConfig": { "github": { "url": "https://github.com/snowdreams1006/snowdreams1006.github.io" } }}有些插件并未提供插件配置项,可以省略该步骤,有的插件会提供配置项,以插件介绍文档为准.如何开发插件GitBook 插件是在 npm 上发布的遵循传统定义的 node 包,除了标准的 node 规范外还有一些 Gitbook 自身定义的相关规范. ...

➢ 安装和使用插件方法在根目录下创建book.json 在该文件中按照指定格式插入以下插件对应的代码。 安装插件有两种方式 ： 一种是在book.json写入相应插件和配置后， 使用gitbook install安装插件。 一种是使用npm install pluginName安装，然后写入配置 ➢ hide-element 隐藏元素主要用来隐藏不想看到的元素。 如： 默认的gitbook左侧提示：Published with GitBook 使用方式：在book.json中写入以下内容 { "plugins": [ "hide-element" ], "pluginsConfig": { "hide-element": { "elements": [".gitbook-link"] } }}➢ back-to-top-button 回到顶部当文章篇幅较长时，页面底部会显示按钮，一键点击自动回到顶部。 使用方式: 在book.json中写入以下内容 { "plugins": [ "back-to-top-button" ]}➢ chapter-fold 导航目录折叠gitbook默认目录没有折叠效果。 使用方式：在book.json中写入以下内容 { "plugins": ["chapter-fold"]}➢ code 复制代码在代码域的右上角添加一个复制按钮，点击一键复制代码。 使用方式： 在book.json中写入以下内容 { "plugins" : [ "code" ]}➢ splitter 侧边栏宽度可调节左侧目录和右侧文章可以拖动调节宽度。 使用方式： 在book.json中写入以下内容 ...

每个人都应该要有自己的博客，下面介绍下自己使用jekyll在GitHub Pages部署搭建个人博客的内容 目录基本介绍从事互联网行业日久后，技术渐长，总想着写写，把自己回，让别人更多的看到自己。个人是这样想的哈哈。之前曾经自己使用laravel自己写了个项目，不了了之值。当时的感觉就会耗时不说，最重要的感觉上班在写，下班后继续写博客代码。失去了，做这件事情的本意（分享）。 其实现在搭建一个技术博客，非常简单。 常用的有下面几种： GitHub Pages + JekyllGitHub Pages + Hexowordpress自行构建依托与java或者PHP，配合前端vue，h5等什么是GitHub PagesGithub Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。Github Pages 支持 自动利用 Jekyll 生成站点，也同样支持纯 HTML 文档，将你的 Jekyll 站点托管在 Github Pages 上是一个不错的选择。 什么是jekylljekyll是一个简单的免费的Blog生成工具，类似WordPress。但是和WordPress又有很大的不同，原因是jekyll只是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务,例如Disqus。最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。 个人博客搭建整体流程: 选择一个jekyll主题，fork到自己的github仓库内使用gitHub的GitHub Pages，配置项目设置 GitHub Pages删除原有博客中内容，编写自由内容步骤详解1. fork项目以我个人项目为例，打给地址https://github.com/MyStudytime/studytime-Blog，点击Fork按钮复制代码到自己的仓库。大概1分钟左右可以完成。 2. 删除 CNAME 文件删除项目中的 CNAME 文件，CNAME 是定制域名的时候使用的内容，如果不使用定制域名会存在冲突。 3. 设置 GitHub Pages点击Settings按钮打开设置页面，页面往下拉到GitHub Pages相关设置，在Source下面的复选框中选择master branch，然后点击旁边的Save按钮保存设置。 4. 重命名项目点击Settings按钮打开设置页面，重命名项目名称为：YourGithubUserName.github.io 5. 重命名之后，再次回到 Settings > GitHub Pages 页面会发现存在这样一个地址： https://YourGithubUserName.github.io 特别注意此处完成后，虽然也可以打开页面，但是跳转页面还是我的页面，需要修改jekyll配置文件。 ...

平常写一些文档或者个人笔记时，Markdown 是我的第一个选择，因为它用起来真的很方便、简洁。那么今天要讲的 Docsify 是什么呢？Docsify简介Docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。 这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。 docsify 中文文档 全局安装安装脚手架工具 docsify-cli，安装过程中较慢的可以切换 npm 源为 cnpm $ npm i docsify-cli -gGithub 创建你的 Blog 项目如果你正在用 Markdown 写一些 Blog 项目，那么也可以用你现在的项目，如果你没有，那么建议你在 Github 新建一个属于你的 Blog 项目，开始我们接下来的学习 初始化文档注意这里的文件名约定为 docs 也是官方推荐，请按照规则设置，否则发到 Github 可能会出现一些问题 $ docsify init docsInitialization succeeded! Please run docsify serve docs执行完以上命令 docs 文件目录下会生成以下 3 个文件： index.html：入口文件README.md：会做为主页内容渲染.nojekyll：用于阻止 GitHub Pages 会忽略掉下划线开头的文件启动本地服务预览docs 同级目录下执行以下命令，打开本地服务器，默认地址为：http://localhost:3000 ...

我是一个懒惰的程序员。我在github仓库里用issue的方式写了很多分享文章，想同步到CSDN上。但是我又不想一篇篇手动复制粘贴，因此想用代码来实现自动化。 例子：https://github.com/i042416/Kn... 这是我的一个issue： 我使用下面这些nodejs代码实现从github 仓库issue到CSDN博客的拷贝： var config = require("./mcConfig");var request = require('request');var querystring = require('querystring');function createPost(oPost) { var url = "https://mp.csdn.net/mdeditor/saveArticle"; var oBody = { title: oPost.title, markdowncontent: oPost.body, tags:"Fiori", categories:"Fiori", channel:"14", type:"original", articleedittype:"1", content: oPost.body };var formData = querystring.stringify(oBody);var contentLength = formData.length;var createPostOptions = { url: url, method: "POST", headers: { "content-type": "application/x-www-form-urlencoded", "Content-Length": contentLength, "origin" :"https://mp.csdn.net", "referer" :"https://mp.csdn.net/mdeditor", "User-Agent" :"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36", "cookie": config.cookie }, body: formData}; return new Promise(function(resolve,reject){ var requestC = request.defaults({jar: true}); console.log("Step1: create post via url: " url ); requestC(createPostOptions,function(error,response,body){ if(error){ reject(error); } console.log("response: " body); resolve(body); }); });}module.exports = createPost;var request = require('request');function getIssue(issueNumber) { var url = "https://api.github.com/repos/i042416/KnowlegeRepository/issues/" issueNumber; var getIssueOptions = { url: url, method: "GET", json:true, headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36" } }; return new Promise(function(resolve,reject){ var requestC = request.defaults({jar: true}); console.log("Step1: get issue detail via url: " url ); requestC(getIssueOptions,function(error,response,body){ if(error){ console.log("error occurred: " error); reject(error); } console.log("title:" body.title); console.log("body: " body.body); for( var i = 0; i < body.labels.length; i ){ console.log("label: " body.labels[i].name); } resolve(body); }); });}module.exports = getIssue;var readIssue = require("./readIssueMod");var createPost = require("./createPostMod");readIssue(2215).then(createPost).catch((error)=>{console.log("error: " error)});执行结果： ...

github的webhook是个有用的功能，允许开发人员指定一个服务器的url。当开发者对github仓库施加操作，比如提交代码，创建issue时，github网站会自动向该url指定的服务器推送事件。借助webhook，我们可以实现很多自动化流程。比如部署一个应用在AWS上，本地提交代码后，github网站自动触发webhook，调用AWS上应用的逻辑，在AWS上将本地提交的最新代码用git pull抓取到AWS上并重新部署。 下面我们通过一个具体的例子来学习github webhook的用法。 新建一个github仓库，点击Settings链接： 在Payload url里指定一个应用的url，该url对应的应用监听github网站推送的事件。 Content Type指定成application/json便于我们在nodejs应用里解析payload。 创建后点Add webhook保存，github会发送一个json paload到这个url指定的应用上。 在Recent Deliveries里查看负载明细： 负载明细如下： 我们现在来做个实验，把webhook指定的url对应的应用设置一个断点，然后在github仓库里新建一个issue： 断点立即触发了。 从调试器里能观察到这个create issue事件的所有负载。 我部署在AWS上监听github webhook框架推送github repository发生变化的事件的应用源代码，可以从我的github上获取：https://github.com/i042416/we... 代码很短，我的同事Haytham写的： var http = require('http')var createHandler = require('github-webhook-handler')var handler = createHandler({ path: '/push', secret: 'dis-koi' }) 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(8083) handler.on('error', function (err) { console.error('Error:', err.message);}) handler.on('push', function (event) { switch(event.payload.repository.name) { case 'githubHook': //this push event is from my persional github account, as SAP github.tool's github hook do not work, so I use this one to test push event console.log("reveive a push event from githubHook"); run_cmd('sh', ['./webshop.sh'], function(text){ console.log(text) }); break; case 'frontend-web': //push event from frontend-web console.log("reveive a push event from frontend-web"); run_cmd('sh', ['./webshop.sh'], function(text){ console.log(text) }); break; case 'backend-ms': //push event from backenf-ms console.log("reveive a push event from backend-ms"); run_cmd('sh', ['./backend_ms.sh'], function(text){ console.log(text) }); break; }}) handler.on('issues', function (event) { console.log('Received an issue event for %s action=%s: #%d %s', event.payload.repository.name, event.payload.action, event.payload.issue.number, event.payload.issue.title);})要获取更多Jerry的原创文章，请关注公众号"汪子熙": ...

原文链接：用 Travis CI 自动部署 Github Pages 前言Github Pages 不能运行动态程序，只能输出一些静态内容。因此 Github Pages 非常适合用于前端项目的展示。可用于存放项目介绍、项目文档或者个人博客。本文介绍了怎么用 Travis CI 自动化部署 Github Pages。 关于 CI持续集成（Continuous integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通常每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。目前 github 开源项目用的较多的 CI 主要是 Circle CI 和 Travis CI，两者都是利用容器技术来适配不同项目环境。 (图一 CIrcle CI，图二 Travis CI) 步骤1. 安装 Github App在 Github Market Place 安装 Travis CI。安装时选择你想要的项目权限。<img src="https://s2.ax1x.com/2019/05/0...; width="50%" alt="ENCylT.png" title="ENCylT.png" /> 2. 配置 Github Token配置 Github Token 用于 Travis CI 对你项目的访问权限，配置完了之后 不要刷新页面，先点一下 Token 后面的复制按钮，因为你只能看见这个 Token 一次，刷新了它就没了 不得不赞一下 Github 的安全性 :+1: ...

当Vue项目完成后，在根目录下打开命令行，输入命令：npm run build实际上此命令就是执行build.js文件，将项目打包成静态资源。 此命令完成后，项目根目录下会多出一个dist文件夹，dist文件里面有：static文件下包括项目打包后的css、js、img、fonts(字体图标)。项目资源无法加载点击index.html,浏览器显示该页面是空白的。打开控制台看到index.html文件中没有加载任何css、js文件。解决方法： 打开项目根目录　config　下的　index.js　文件，进行如下修改： 将assetsPublicPath: ‘/‘,　改为　assetsPublicPath: ‘./‘, 保存后重新npm run build,在新生成的dist目录下点开index.html，这时页面结构正常显示出来了，但是页面字体图标和mock的数据无法正常加载。字体图标无法加载页面中用background加载的图片可以正常显示，但是所有的字体图标都不能正常显示，解决方法：打开根目录下　build中的　utils.js　文件，在控制build样式文件代码中添加　publicPath: ‘../../‘，　如下：保存后，依旧重新’npm run build’,打开dist目录下的index.js可以看到字体图标正常显示了。 这里为什么需要这样修改，可以参考https://github.com/vuejs-temp…。Mock数据无法正常加载(我的做法是把模拟的json数据放到cdn上，跳过这一步)此项目的绝大部分页面内容是通过在跟目录下创建的data.json文件渲染到页面上的，是模拟从后端请求数据的，开发调试时用’npm run dev’命令，会借助node启动一个本地服务器，可以正常的渲染出相应的数据。而通过打包后的项目时属于静态资源的，点击index.html查看项目，是无法加载mock的数据的，浏览器也会报跨域的错误。若想正常的加载mock数据，最好的方式是讲打包后的资源丢到服务器中，或者使用jsonp请求线上真实数据，因为它的原理是利用script标签来获得数据，在github上是可以预览到的。如何在github上预览网页效果：settings—github pages—选择“master branch”和“save”—刷新—再次找到“github pages”复制底下的链接—返回点击仓库名—点击edit—粘贴到框框内，一定要记住添加文件名及其后缀比如index.html—save.别人就可以通过这个链接访问你的网页原文：https://blog.csdn.net/x550392…

一、创建GitHub Pages站点GitHub Pages是一种静态站点托管服务，旨在直接从GitHub仓库托管您的个人，组织或项目页面。每个GitHub帐户和组织都有一个站点。1.新建仓库访问GitHub官网 https://github.com 登陆GitHub账号，新建仓库，名称固定格式为: <username>.github.io其中username是GitHub上的用户名（或组织名称）如果仓库名称的第一部分与您的用户名不完全匹配，则无法正常工作，因此请务必正确使用。2.将仓库代码clone到本地使用SSH或HTTPS方式, 将仓库代码拉取到本地(SSH方式需要配置SSH keys, HTTPS方式需要输入账号密码) 3.本地新建index.html文件4.将本地代码推送到github5. 访问站点在浏览器中访问 http://&lt;username>.github.io, 即可访问到你的网站首页, 内容为你刚才新建的index.html文件二、自定义域名1.项目代码中设置自定义域名(创建CNAME文件)点击当前项目的【Settings】, 在【Custom domain】一栏输入你自定义的二级域名, 然后点【Save】此时会在你的项目根目录下会自动生成一个CNAME文件, 文件内容为你自定义的二级域名。2.域名解析中添加CNAME类型的解析记录登陆到你自己的域名管理后台，新增一条CNAME类型的域名解析记录, 内容如下:记录类型: CNAME主机记录: 自定义的二级域名记录值: <github用户名>.github.io保存后, 稍等几分钟,在浏览器访问你自定义的二级域名即可正常链接到你的github个人网站。三、Hexo搭建网站Hexo官网中文版 https://hexo.io/zh-cnHexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。1.安装Hexo(1) 安装依赖的应用程序：Node.js (最低支持版本6.9,下载地址: https://nodejs.org/en)Git (下载地址:https://git-scm.com/download)(2) 使用 npm 安装全局安装Hexo如果npm安装速度过慢, 可使用淘宝NPM镜像(http://npm.taobao.org) 代替npm$ npm install -g hexo-cli2.Hexo新建项目(1) 新建网站项目, 并安装依赖库在本地电脑上, 指定一个文件夹用于存放hexo项目代码, 执行以下指令:$ hexo init <folder>$ cd <folder>$ npm install新建完成后，指定文件夹的目录如下：.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes(2) 本地预览首先在当前项目下, 安装 hexo-server 模块npm install hexo-server –save安装完成后，输入以下命令以启动服务器，您的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，您无须重启服务器。hexo server浏览器访问 http://localhost:4000, 即可访问网站首页。3.Hexo配置与部署(1) 修改配置文件_config.yml安装 hexo-deployer-git依赖库npm install hexo-deployer-git –save修改配置(改为你自己的GitHub项目地址, 并且确保GitHub已配置了你当前机器的SSH密钥)deploy: type: git repo: <repository url> #git@github.com:sufaith/sufaith.github.io.git branch: [branch] #master message: [message]repo: 库（Repository）地址branch: 分支名称。message: 自定义提交信息 (默认为 Site updated: {{ now(‘YYYY-MM-DD HH:mm:ss’) }})将url 修改为 您的站点网址 http://yoursite.com/(2) source目录下，创建CNAME文件CNAME文件的内容为你自定义的二级域名(3) 生成静态文件hexo generate#简写为:hexo g执行 hexo generate g命令后, 会在项目根目录下自动生成 public 文件夹, 该文件夹即是我们网站所需的静态文件。(4) 一键部署静态文件至github#先清除站点文件，然后重新生成站点文件并将之推送到指定的库分支hexo clean && hexo deploy#简写为:hexo clean && hexo d执行命令后, 成功将生成的静态文件推送到GitHub。(5) 访问网站在浏览器输入你自定义的二级域名, 即可正常访问到你用GitHub+Hexo搭建的网站。 ...

输出目标文件语法格式: gitbook build [book] [output]默认情况下,gitbook 输出方式是静态网站,其实 gitbook 的输出方式有三种: website, json,和 ebook.只不过另外两种不是很常用,更多情况下我们是使用静态网页搭建个人官网,或托管到第三方平台,或部署到私有云服务器,但不管怎么样,还是离不开生成这一步.示例:# 默认输出格式: website$ gitbook build –format=website# 更改输出格式: json$ gitbook build –format=json# 更改输出格式: ebook$ gitbook build –format=ebook默认情况下输出目录: _book/,整个项目的入口文件是: index.html集成 github 网站本教程的电子书源码和输出文件均托管到 github 网站,所以这里介绍下如何利用 Github Pages 静态网页服务与 gitbook 进行集成.什么是 GitHub Pages ?Github Pages 是 github 网站推出的一种免费的静态网页托管服务,适合搭建静态的项目主页或个人官网.其中,网站项目的源码直接托管在 github 仓库中,当仓库文件更新后,该仓库所关联的网站自动更新,从而实现了源码与官网的联动更新.如果想了解更多详情,请参考官网: https://pages.github.com/怎么做 GitHub Pages ?每个账号有且只有一个主页站点,但允许无限制多的项目站点.啥是主页站点,项目站点又是啥?别急,让我先举个例子看一下最终效果.假如用户名: zhangsan 名下有四个公开仓库,一个仓库名叫做: zhangsan.github.io,另外三种分别是: project01,project02,project03 .如果想要对外暴露上述四个仓库作为我们的静态网站,那么最终效果就是下面这样的.主页站点: https://zhangsan.github.io项目01站点: https://zhangsan.github.io/project01项目02站点: https://zhangsan.github.io/project02项目03站点: https://zhangsan.github.io/project03注意将 zhangsan 替换成自己的 github 用户名,否则八成是打不开网站,除非真的有 zhangsan 这个用户.其实上述规则很好理解,github 网站作为一个托管中心,有成千上万的用户在使用 github 并且每个用户的用户名都是唯一并且不同的,因此 *.github.io 通配符域名刚好充当命名空间.可以预料的是,不仅仅有 <username>.github.io 这种二级域名,说不定还有 api.github.io,docs.github.io 等等,毕竟只需要购买 .github.io 通配符域名证书就可以支持任意多的二级域名了,感谢 github 赠送我们免费的 https 网站.说到这里,不得不吐槽下 gitbook 的命名空间策略了,gitbook 也有自己的电子书托管服务,但访问地址是 <username>.gitbook.io/<namespace> .很显然,gitbook 没有区分主页站点和项目站点,相当于全部都是项目站点,缺少主次之分.闲言少叙,既然知道了输入内容和输出效果,那么接下来的任务就是了解中间过程了,让我们一起探讨下怎么发布网站吧!主页站点创建 <username>.github.io 公开仓库前往 https://github.com/ 网站创建名为 <username>.github.io 的公开仓库.比如我的用户名是: snowdreams1006 ,那么我的主页站点仓库就是: snowdreams1006.github.io创建首页 index.html 文件不管是在线直接创建 index.html 还是克隆到本地创建 index.html ,最终的 <username>.github.io 仓库一定要有 index.html 首页文件.示例:# 克隆到本地$ git clone https://github.com/username/username.github.io# 切换到项目$ cd username.github.io# 创建 index.html 文件$ echo “Hello World” > index.html# 推送到远程仓库$ git add –all$ git commit -m “Initial commit”$ git push -u origin master访问主页站点 https://username.github.io打开浏览器,输入网址: https://username.github.io 访问主页站点,显示的内容正是我们刚刚提交的 index.html 文件内容.如果没有正常显示,清除浏览器缓存强制刷新试试看!项目站点相比主页站点来说,项目站点命名比较随意了,作为静态网站不可或缺的文件仍然是 index.html.创建首页 index.html 文件创建首页文件并添加测试内容,方便待会在线访问项目站点测试是否部署成功.设置 GitHub Pages 选项点击仓库首页右上方设置(Settings)选项卡,往下翻到 GitHub Pages 选项,选择源码目录,根据实际情况选择源码来源于 master 分支还是其他分支或者docs/ 目录.方便起见,选择第一个 master 分支即可,注意下面的主题和这一步的来源只能两者选其一,否则主题优先级更高!访问主页站点 https://username.github.io/<repository>打开浏览器,输入网址: https://username.github.io/repository 访问项目站点,显示的内容正是我们刚刚提交的 index.html 文件内容.如果没有正常显示,清除浏览器缓存强制刷新试试看!如何集成 gitbook ?我们已经知道 Github Pages 是提供静态网站的免费托管,而 gitbook 默认生成的内容就是静态网站,两者如何结合自然不用我多说了吧?gitbook 默认输出目录 _book/ 包括了静态网站所需的全部资源,其中就包括 index.html 首页文件.因此我们只需要每次生成后将 _book/ 整个目录复制到项目根目录,那么推送到远程仓库时自然就是输出后静态网站了啊!示例:# 生成静态网站$ gitbook build# 复制到项目根目录$ cp -r _book/ .# 添加到本地版本库$ git add .$ git commit -m “publish”# 推送到远程仓库$ git push origin master现在登录 github 网站看一下静态网站是否成功上传以及访问主页站点或项目站点看一下最新内容是否成功渲染吧!小结本节我们学习 gitbook 有三种输出方式,其中默认的网页输出最为常用.除此之外,还讲解了如何与 github pages 进行结合,从而实现源码和网站的自动更新维护.如果源码没有托管到 github 这种第三方服务商,你也可以搭建自己的服务器,比如将 _book/ 目录全部扔到 nginx 服务器做静态资源服务器等.毕竟,源码和输出内容都在你手中,想怎么玩还不是自己说了算? ...

gitbook 官网是官方提供的图书托管的在线平台,分为新版官网(需要FQ) https://www.gitbook.com/ 和旧版官网(无需FQ) https://legacy.gitbook.com 两个网站.目前均正常提供服务,但令人遗憾的是,两个网站的信息相互独立,而且现在注册的账号默认只能在新版官网中使用,而新版官网的访问速度简直比 github 还要慢,所以国内用户在线访问你的电子书真的需要点技术手段了!本文主要介绍 www.gitbook.com 官网的基本使用,而 legacy.gitbook.com 网站我就算是想介绍也没有账号测试啊.“巧妇难为无米之炊”,明明你就在那里,可我却什么也做不了.先大概说一下 gitbook.com 网站的一些个人总结吧.gitbook.com 提供收费和免费服务,有点像早期的 github ,免费账号只能创建一个私有的命名空间,其他命名空间只能是公开的,这里的命名空间可以理解为一本书.这一点是不是有点像早期的 github.com?免费账号无法创建私有仓库,只能是公开仓库.(现在 github.com 已被微软收购,目前可以创建无限量的私有仓库了!)再说 gitbook 的账号问题,像 github 一样提供用户名和邮箱登录方式,他们的用户名都可以作为二级域名,比如我的用户名是snowdreams1006,那么我的 gitbook 第一本电子书网址就是 https://snowdreams1006.gitbook.io/index/ ,再看一下我的 github 个人网址 https://snowdreams1006.github.io/ ,这两个是不是很类似?!如果不仔细看的话,八成你会觉得一样,一个是gitbook.io,另一个是github.io.所以我严重怀疑他俩是不是有着不为人知的私密关系,太多的相似性,鼓励分享,限制私有等等特点.无图无真相,趁着这次教程顺便将 github 个人网站项目同步到 gitbook 电子书项目了,这样的好处是本地只需要推送到 github ,自动更新 github.io 网站(利用的是github 静态网站托管服务) ,然后再自动同步到 gitbook.io 网站.是不是很神奇,一份源码,两个官网!gitbook : https://snowdreams1006.gitbook.io/github : https://snowdreams1006.github.io/注册并登陆 gitbook.com注册信息主要包括用户名和邮箱,还有一些其他信息,没什么特殊的注意事项.访问 https://www.gitbook.com/ 需要 FQ新建命名空间(电子书)注册账后后会默认生成一个私有的命名空间,因为并不打算将私有电子书托管到 gitbook,所以接下来直接将其转变成公开电子书进行演示.个性性配置标题和图片主题颜色和页面反馈观众观众指的是当前电子书面向的受众是谁,公开的和私有的的区别以及设置是否被谷歌搜索收录.域名默认域名是 https://snowdreams1006.gitbook.io/<space>,如果需要自定义域名,请保证 dns 能够正确解析到该网站.url 设置的命名空间是 index,因此最终访问路径是 https://snowdreams1006.gitbook.io/index/整合gitbook 默认提供4种整合方式,在下孤陋寡闻只了解 github ,其余三种没接触过,暂不涉及.选择 github 进行整合登录 github 并授权选择列出公开的仓库,然后输入用户名和密码进行登录并授权.选择目标仓库授权成功后会列出当前 github 账号下全部的公开仓库,选择目标仓库并点击下一步.这里以 snowdreams1006.github.io 公开仓库为例,因为该仓库是本人官网源码项目.同步内容选择同步分支根据实际情况选择同步分支,因为我一般是直接推送到 master 分支,所以 master 分支是个人网站的维护分支,因此这一步我选择的是 master.选择同步内容选择同步内容的方式,是从 github 同步到 gitbook,还是从 gitbook 同步到 github,因为我的项目已托管到 github ,所以初次同步内容选择的是 github –> gitbook.显示 github 按钮生成的电子书网站是否显示 github 按钮,作用是点击该按钮会跳转到关联的github 仓库上.此时心里在想,万一点进 github ,随手就是一个 star 呢?哈哈!等待内容导入根据目标仓库的大小不同,导入内容是的时长自然也不一样,耐心等待…上线导入完成,电子书终于正式上线了!现在赶紧分享一下好消息吧,访问 https://<username>.gitbook.io/<space> 在线阅读!小结本文以如何集成 github 为例,演示了 gitbook.com 发布电子书的基本流程,由于 gitbook 电子书内容来自于 github 项目,因此我们只要更新 github 仓库,我们的 gitbook 电子书网站自然也就相应更新了!gitbook 是 markdown 和 github 的完美结合体,借助 gitbook.com 官网我们很容易发布并托管电子书.美中不足的是,国内无法正常访问 gitbook.com ,因此并不是很推荐将电子书发布到 gitbook.com 网站.现在国内也有类似的产品,有一种产品叫做 看云,还不错!后续还会介绍 gitbook 如何结合 github 发布个人网站,欢迎继续关注 gitbook 系列教程!如何打造免费的个人官网,想了解 https://snowdreams1006.github.io/ 背后的故事吗? ...

最近在倒腾WPF的项目，试着搜一下微软官方提供的WPF Smaples, 结果找到了https://github.com/Microsoft/….微软Github开源项目入口当你访问网址http://microsoft.github.io>时….微软开源项目受欢迎程度排名打开主页https://opensource.microsoft.com，将排序条件从默认的Trending切换到Stars, 即可看到Star最多的项目，同理Forks是按fork的量排序，AA Name是按项目名字典序排序。还可点击← Previous 或Next →来进行翻页。Visual Studio Code免费开源且十分流行的跨平台代码编辑器，除了代码编辑功能以外，安装插件后还能进行调试，目前已更新到版本v1.3.2. 相比于Atom、Sublime等其他代码编辑器，它拥有最多的扩展插件，最新数据表明它排在所有商业和非商业IDE中位居第6位。还提供代码实时分享的协作开发(Live share)功能。github地址: https://github.com/Microsoft/...TypeScriptTypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯·海尔斯伯格参与了TypeScript的开发。TypeScript设计目标是开发大型应用，然后转译成JavaScript。由于TypeScript是JavaScript的严格超集，任何现有的JavaScript程序都是合法的TypeScript程序。github地址: https://github.com/Microsoft/...RxJSRxJS是JavaScript的Reactive Extensions，它是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。该项目是 Reactive-Extensions/RxJS 上一版本的重写，具有更好的性能、更好的模块性、更好的可调试调用堆栈，同时保持大部分向后兼容，只有一些破坏性的变更(breaking changes)是为了减少外层的 API 。中文官网: https://cn.rx.js.org .github地址: Reactive-Extensions/RxJS.NET Core 基础类库此Repo包含.NET Core的库实现（称为“CoreFX”）。 它包括System.Collections，System.IO，System.Xml和许多其他组件。 相应的.NET Core Runtime存储库（称为“CoreCLR”）包含.NET Core的运行时实现。 它包括RyuJIT，.NET GC和许多其他组件。 特定运行时的库代码（System.Private.CoreLib）位于Core CLR Repo中。 它需要与运行时一起构建和版本化。 CoreFX的其余部分与运行时实现无关，可以在任何兼容的.NET运行时（例如CoreRT）上运行。github地址: https://github.com/dotnet/corefxCNTKMicrosoft Cognitive Toolkit（CNTK），一个开源的深度学习工具包github地址: Microsoft/CNTKMicrosoft calculatorWindows计算器：Windows自带的一个简单但功能强大的计算器 (Win10上的UWP计算器)github地址: Microsoft/calculatorMonaco editor基于浏览器的代码编辑器.在线试用:https://microsoft.github.io/monaco-editor/playground.htmlgithub地址: Microsoft/monaco-editorMS-DOSMS-DOS 1.25和2.0的原始资源，供参考。github地址: Microsoft/MS-DOSRedis windows版由于Redis官方没推出Windows版，微软自己基于Redis官方的Linux版的部分特性做了一个Windows版。Redis windows版是一个内存数据库，可以在磁盘上保留。 数据模型是键值，但支持许多不同类型的值：字符串，列表，集，排序集，哈希值.github地址: MicrosoftArchive/redis.NET Core CLR (公共语言运行时)CoreCLR，是 .NET Core 的执行引擎，包括 RynJIT、.NET GC、原生 interop 和其他 .NET 运行时组件。当你在 .NET Core 上运行 ASP.NET 5 应用时，CoreCLR 用来执行你的代码，这还需要依赖于 CoreFX/BCL 库。微软称在开源和跨平台 .NET 运行时环境这项工作上将会有几个额外的里程碑。github地址: https://github.com/dotnet/cor...ASP.NET CoreASP.NET Core 是新一代的 ASP.NET，早期称为 ASP.NET vNext，并且在推出初期命名为 ASP.NET 5，但随着 .NET Core 的成熟，以及 ASP.NET 5 的命名会使得外界将它视为 ASP.NET 的升级版，但它其实是新一代从头开始打造的 ASP.NET 核心功能，因此微软宣布将它改为与 .NET Core 同步的名称，即 ASP.NET Core。ASP.NET Core 可运行于 Windows 平台以及非 Windows 平台，如 Mac OSX 以及 Ubuntu Linux 操作系统，是 Microsoft 第一个具有跨平台能力的 Web 开发框架。微软在一开始开发时就将 ASP.NET Core 开源，因此它也是开源项目的一员，由 .NET 基金会 (.NET Foundation) 所管理。github地址: https://github.com/aspnet/Asp...Entity Framework CoreEntity Framework Core 是微软新一代的对象关系对应 (ORM) 框架，以 .NET Core 实现，不过它是归属于 ASP.NET Core 项目的一部分，在 ASP.NET Core 开始开发时就被列入标准功能，与现行的 Entity Framework 一样，是微软官方建议使用的数据访问功能，但 .NET Core 成功移植 ADO.NET 基类库 System.Data 之后，开发人员仍能使用 ADO.NET 作为数据访问的解决方案。github地址: https://github.com/aspnet/Ent...PowerShellPowerShell（包括Windows PowerShell and PowerShell Core）是微软公司开发的任务自动化和配置管理框架，由.NET Framework和.NET Core是构建的命令行界面壳层相关脚本语言组成，最初仅Windows组件，后于2016年8月18日开源并跨平台支持。在PowerShell中，管理任务通常由cmdlets（发音为command-lets）执行，这是执行特定操作的专用.NET类。可以将cmdlet集合至脚本、可执行文件（一般是独立应用程序）中，或通过常规.NET类（或WMI / COM对象）实例化。通过访问不同数据存储中的数据由PowerShell运行，如资源管理器或注册表。PowerShell Core可很好地与现有工具配合使用, 并针对处理结构化数据 (例如 json、csv、xml 等)、REST API 和对象模型进行了优化。github地址: https://github.com/PowerShell…如何在其中搜索自己需要的项目由于主页https://opensource.microsoft.com提供了搜索功能，只需在Search repos…的地方输入关键字即可。比如我需要搜索wpf相关的，在该处输入wpf。此时发现地址栏的网址已变成https://opensource.microsoft…..搜索结果为:同上，此处也可切换排序条件，点击← Previous 或Next →来进行翻页。GitHub-邮件订阅事实上，微软开源项目是使用Github pages来管理的。根据Github pages的规则，默认设置下Github pages访问页http://microsoft.github.io>对…. 使用Github pages搭建过个人博客的人都应该深知这一点。在github上登录个人账号之后，只需点Watching, 选择"Be notified of all conversions"即可，一旦github上有更新，会在Email中收到通知Rss订阅本人使用工具https://fivefilters.org/conte…推荐使用Feedly来订阅，这样一来，只要https://opensource.microsoft.com的列表里出现新项目，你进feedly就能看到了其他 microsoft.github.io上有用的链接Windows on Github https://microsoft.github.io/w...Microsoft Days in the Web https://microsoft.github.io/f...Project Mu https://microsoft.github.io/mu/PowerBI Custom Visuals https://microsoft.github.io/P...Microsoft Technical Case Studies https://microsoft.github.io/t...Microsoft Open Source Code of Conduct https://microsoft.github.io/c...Embedded Learning Library (ELL) https://microsoft.github.io/ELL/A library for building cross-platform apps - ReactXP https://microsoft.github.io/r...PartsUnlimited https://microsoft.github.io/P...PartsUnlimitedMRP https://microsoft.github.io/P...CodePush https://microsoft.github.io/c...Microsoft PROSE SDK https://microsoft.github.io/p...Create extensions for Visual Studio https://microsoft.github.io/e...DSCEA https://microsoft.github.io/D...IoT kit built for the cloud https://microsoft.github.io/a…如果有问题，欢迎留言交流本文首发于笔者的博客园博客，如需转载请注明，谢谢配合 ...

git checkout -b “gh-pages"yarn add gh-pages修改package.json 增加 “deploy” : “gh-pages -d build” bulid是打包后生成的路径修改package.json 增加 “homepage”: “https://xxxx.github.io/项目名称"yarn run buildyarn run deploygithub setting 选择 gh-pages 分支vue-cli需要在config/index.js 将assetsublicPath: ‘/’ 改为 ‘./’

本周公司老项目开发很受挫，之前一直用ui框架，原生css薄弱，我打算周末原生css手写一个轮播组件学习了下小程序的视频播放相关功能开发，写了一个视频播放的demo 包括选择视频 播放暂停以及发送弹幕JavaScript看了冴羽博客 深入JS学习系列，写了两篇读书笔记，放在我的博客里github page 我了解的是根据index.html 或者readme.md 可选github提供的主题生成一个展示页，index.html的优先级高于readme，地址为 xxx.github.io/xxx/总结：加强css的学习已经迫在眉睫了保持js的学习，框架什么的不是那么重要，我发现冴羽博客写的还是很适合入门的（小白脸这周没有学python，周末刷几道题

Github Pages 如何被百度收录答案是无法收录创建 Github Page 一个多月了，发现百度索引量依然为0。利用百度自带的抓取诊断工具诊断发现，所有抓取记录都是失败，状态码为403。判断为 Github 屏蔽了百度蜘蛛。怎么搞才能被收录更换托管服务商使用 coding.net 自动同步代码我们选择 Github Page 的重要原因之一是它免费，所以假定我们是没有自己的服务器的，所以我们选择一个同样免费的托管服务商 coding.net, 创建一个 Github pages 的镜像首先我们访问 coding.net，创建账号，因为我们要使用 Pages 服务，需要升级一下账户为腾腾讯云开发者平台。(当然也可以直接创建 腾讯云开发者平台账号)然后参考文档 如何将Git仓库导入腾讯云开发者平台？，把代码同步过来。手动操作总是麻烦，尤其像我的博客还是从 segmentfault 自动同步的。所以接着前面文章的介绍，利用 travis-ci 来自动同步，.travis.yml 填加如下代码# 同步到coding.net- git push https://xiehuanjin:$CODING_NET_TOKEN@git.dev.tencent.com/xiehuanjin/actors315.github.io.git –allCODING_NET_TOKEN 为 travis-ci 变量，值为在腾讯云开放平台创建的访问令牌，只要有仓库控制权限就可以。DNSPOD 解析域名主战场还是 Github，coding 只是做个镜像，所以并不把博客完全迁移过来，只是针对百度蜘蛛让其访问到 coding.net。我们利用 dnspod 来进行域名解析（当然是因为其免费还很好用），对百度线路进行单独解析。设置完毕，再来诊断一下大功告成

github被微软收购后，提供的工具种类是越来越多了，大大提高了我们程序员日常工作的效率。今天我偶然发现，我们可以一键把自己整个github上的数据，不仅仅是代码，还包含每个仓库里创建的issue都轻松下载到本地进行备份。点这个setting按钮：点Account超链接：新建一个export作业 - 导出作业。过了一会，我们github注册的邮箱地址会收到一封邮件，点击Download export就可以下载一个压缩包到本地：我这个账号的所有github数据不export不知道，一export才吓一跳，竟然有1.7个G那么大。下载下来的文件是一个巨大的压缩包，解开之后是这样子的：随便看几个文件的内容。比如这个commit_comment的json文件：实际就是指的这个commit：这是我github上一个仓库的issue的明细：通过上图的url打开这个issue，发现内容和我通过工具下载的内容一致：我所有上传到github issue里的图片也会通过附件的方式被下载到本地，存储在这些文件夹里：希望这个工具对大家备份自己在github网站上的数据有所帮助。要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Github PagesGithub Pages 是 Github 免费提供的静态网站生成器，你可以利用其创建个人、企业、项目网站。其提供静态页面托管服务和一个二级域名，也可以绑定独立域名。可以很轻易的找到其介绍和如何构建自己的 Github Pages,就不详细介绍了可以参考这些内容What is GitHub Pages?Using Jekyll as a static site generator with GitHub Pages使用 github pages, 快速部署你的静态网页github pages搭建个人博客分页不管是个人博客还是其他主页，内容多了就需要分页展示文章列表。我们选择 Jekyll 作为页面生成器来管理页面。Jekyll 提供了分页功能，使用上也很方便。只需要 _config.yml 文件填加分页配置就可以直接用了。plugins: [jekyll-paginate]paginate: 20 # 每页文章数paginate_path: “essay/page:num” # 可选，分页链接然后在 index.html 直接写上如下代码就会自动生成分页目录<ul> {% for post in paginator.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %}</ul><nav class=“pagination” role=“navigation”> {% if paginator.previous_page %} <a class=“previous pagination__newer btn btn-small btn-tertiary” href="{{ paginator.previous_page_path }}">&larr; 上一页</a> {% endif %} <span class=“page_num pagination__page-number”>{{ paginator.page }} / {{ paginator.total_pages }}</span> {% if paginator.next_page %} <a class=“next pagination__older btn btn-small btn-tertiary” href="{{ paginator.next_page_path }}">下一页 &rarr;</a> {% endif %}</nav>jekyll 会自动生成如下目录效果如下非常方便，但是它也有很多明显的缺点。比如他只支持 _posts 目录下的文章进行自动生成，很大时候就不一定能满足需求了。自定义分页如上面所说，不想把所有文章都放到 _posts 一个目录。比如我想到放在独立的 blog 目录那怎么实现目录的自动生成和分页呢？借助 Data Files 和 PHP 来手动生成分页。_data/blogList.yml 定义如下列表 - key: 6a1b96bda21c937f01a7591ec3e84223 title: PHP实现一个轻量级容器 next: Travis CI 实现自动备份Segmentfault文章到Github - key: 13ee9e07ce28d6310eb5fec64404fa24 title: Travis CI 实现自动备份Segmentfault文章到Github prev: PHP实现一个轻量级容器 next: Travis CI 简介 - key: bb800b68ec4217869667407a8c1470f6 title: Travis CI 简介 prev: Travis CI 实现自动备份Segmentfault文章到Github next: 【php实现数据结构】链式队列在子目录另外定义一个 page.html 模板文件—layout: listtype: customListtitle: 我的博客page: 1total_pages: 100prev_page_path: nonenext_page_path: none—<p>同步自segmentfault(https://segmentfault.com/blog/actors315)</p><h2 id=“目录”>目录</h2><ul> {% for member in site.data.blogList limit:20 offset:#offset# %} <li><a href="/blog/markdown/{{ member.title }}">{{ member.title }}</a></li> {% endfor %}</ul>利用 data 的逻辑处理能力手动实现，然后 php 自动任务手动生成和 jekyll 自助目录同样的结构。$totalCount = count($list);$totalPage = ceil($totalCount / 20);for ($i = 1; $i <= $totalPage; $i++) { if ($i == 1) { $tempFile = DIR . “/../blog/index.html”; } else { $tempFile = DIR . “/../blog/page{$i}/index.html”; } $newPage = false; if (file_exists($tempFile)) { $tempContent = file_get_contents($tempFile); } else { $tempContent = file_get_contents(DIR . “/../blog/page.html”); $newPage = true; if (!is_dir($dir = dirname($tempFile))) { mkdir($dir, 0777, true); } } $tempContent = preg_replace(’/page:[\s]\d+[^\d]/’, “page: {$i}” . PHP_EOL, $tempContent); $tempContent = preg_replace(’/total_pages:[\s]\d+[^\d]/’, “total_pages: {$totalPage}” . PHP_EOL, $tempContent); if ($i == 2) { $tempContent = preg_replace(’/prev_page_path:[\s][^\s]+[\s]?/’, “prev_page_path: /blog/”, $tempContent); } elseif ($i > 2) { $prev = $i - 1; $tempContent = preg_replace(’/prev_page_path:[\s][^\s]+[\s]?/’, “prev_page_path: /blog/page{$prev}/”, $tempContent); } if ($i < $totalPage) { $next = $i + 1; $tempContent = preg_replace(’/next_page_path:[\s][^\s]+[\s]?/’, “next_page_path: /blog/page{$next}/”, $tempContent); } elseif ($i == $totalPage) { $tempContent = preg_replace(’/next_page_path:[\s][^\s]+[\s]?/’, “next_page_path: none”, $tempContent); } if ($newPage) { $tempContent = str_replace(’#offset#’, ($i - 1) * 20, $tempContent); } file_put_contents($tempFile, $tempContent);}这里需要配合后端代码，Github Pages 目前是不支持动态语言的，所以需要借助其他能力，可以参考之篇文章的介绍 《Travis CI 实现自动备份Segmentfault文章到Github》这样就徒手实现了一个分页功能，并且可以根据自己的需要随心所欲，你的分页你作主。详细实现可参考我的Github 页面 呜啦啦的碎碎念 ...

这篇博客将整理在配置博客以及项目 Pages 的自定义域名过程，遇到的问题以及解决方法。Github 的文档对于如何配置自定义域名有详细的介绍，这里不会全部翻译，只重点记录实践的过程，内容涉及为用户网站，公司网站，以及项目网站添加 Apex 域名（qiwihui.com），二级域名（www.qiwihui.com）以及开启 HTTPS。最后，所有指向 www.qiwihui.com 的请求将会被重定向至 https://qiwihui.com。<!–more–>一些注意Github 支持的自定义域名类型支持的自定义域名类型域名例子www subdomainwww.example.comone apex domain & one www subdomainexample.com & www.example.comapex domainexample.comcustom subdomainblog.example.comGitHub Pages 站支持的域名GitHub Pages 站类型在 Github 上 Pages 的默认域名和主机地址页面被如何重定向自定义域名举例User Pages 站username.github.io自动重定向到设置的自定义域名user.example.comOrganization Pages 站orgname.github.io自动重定向到设置的自定义域名org.example.com用户拥有的 Project Pages 站username.github.io/projectname自动重定向到 User Pages 站自定义域名的子目录（user.example.com/projectname）project.example.com公司拥有的 Project Pages 站orgname.github.io/projectname自动重定向到 Organization Pages 站自定义域名的子目录（org.example.com/projectname）project.example.com以个人 Pages 项目为例子开启 Github Pages 功能在项目 Settings 中，找到 GitHub Pages 这一区域，选择 Source 为对应的要部署的分支，这里我选择 gh-pages branch：其中，选择 master branch 会视 /README.md 为 web 的 index.html，选择 master branch /docs folder 会视 /docs/README.md 为 web 的 index.html。在项目配置中自定义域名在 Custom domain 中添加自己的域名并保存：或者，在项目分支中添加 CNAME 文件，CNAME 文件的内容为qiwihui.com这里推荐第二种，尤其对于有设置 CI 的项目，因为 CI 上将第一种设置覆盖。这一步是比较重要却又容易忽视的一步：如果添加到 GitHub Pages 中的是 qiwihui.com，那么 www.qiwihui.com 会被重定向到 qiwihui.com；如果添加到 GitHub Pages 中的是 www.qiwihui.com，那么 qiwihui.com 会被重定向到 www.qiwihui.com；这里我选择重定向到 www.qiwihui.com，所以设置为 qiwihui.com添加 DNS 记录为了能设置Apex 域名，需要在 DNS 中配置 A 记录指向 github 的 IP：185.199.108.153185.199.109.153185.199.110.153185.199.111.153同时，设置 CNAME 记录将 www.qiwihui.com 指向 qiwihui.github.io，即 <你的 github 用户名>.github.io。对于公司来说，这个地址是 <公司名称>.github.io。确认 DNS 记录以下是设置好之后的 DNS 记录情况：$ dig +noall +answer qiwihui.comqiwihui.com. 60 IN A 185.199.111.153qiwihui.com. 60 IN A 185.199.110.153qiwihui.com. 60 IN A 185.199.108.153qiwihui.com. 60 IN A 185.199.109.153$ dig www.qiwihui.com +nostats +nocomments +nocmd ; <<>> DiG 9.10.6 <<>> www.qiwihui.com +nostats +nocomments +nocmd;; global options: +cmd;www.qiwihui.com. IN Awww.qiwihui.com. 28 IN CNAME qiwihui.github.io.qiwihui.github.io. 28 IN A 185.199.110.153qiwihui.github.io. 28 IN A 185.199.108.153qiwihui.github.io. 28 IN A 185.199.111.153qiwihui.github.io. 28 IN A 185.199.109.153SSL（HTTPS）配置，强烈推荐开启勾选 Enforce HTTPSGithub 会自动保持 HTTPS 证书的有效。项目 Pages当给项目设置 Pages 时，一般都已经有一个个人或者公司的 Pages 了，如果没有，就可以按以上的过程添加。如果已经设置了，则只需要很简单的两步即可：以下以个人项目 qiwihui/fullstackpython.com，设置地址为 fullstackpython.qiwihui.com在项目中开启 Github Pages，并添加 CNAME 文件指向 fullstackpython.qiwihui.com：在 DNS 记录中添加 CNAME 记录将 fullstackpython.qiwihui.com 指向 qiwihui.github.io，即 <你的 github 用户名>.github.io。对于公司来说，这个地址是 <公司名称>.github.io。一段时间后即可。参考Using a custom domain with GitHub PagesCustom domain redirects for GitHub Pages sitesCustom domain for GitHub project pages 的回答Custom subdomains in GitHub project pages ...

Github Pages对于建立静态网站来说真的是超级方便，概念方便，配置方便。只要你不超出HTML+Javascript+CSS的范围，一切都好说。如果为了漂亮，可以使用Bootstrap等各种技术加强页面显示，只要是静态的，一切都好说。个人主页vs项目主页参考：单个GitHub帐号下添加多个GitHub Pages的相关问题Github Pages有两种建站方案，一种叫个人主页，一种叫项目主页:个人主页：这种是你可以用自己的用户名为域名访问，如我的solomonxie.github.io。这是最简单的方法，网页放在master分支就可以显示。但是这种方法会有比较多限制：放网页的repo必须命名为user.github.io这种形式，user必须与自己的用户名完全相同。一个用户只能有一个这种域名。项目主页：这一种是，你可以使用任意repo，但是域名就不是user.github.io这么简单的形式了。而是user.github.io/repo这种形式。同时，你必须要把网页放在这个repo的gh-pages分支里，才能显示出来。注意一般即使上传好了网页，也不会及时显示出来，有时可能会等几个小时Github才会显示最新的页面。自定义域名的配置一般solomonxie.github.io这种域名虽然已经很简单了，但还是挂着github的名字且有点长，始终摆脱不了供应商的影子。如果做为个人网站的话，这一点的确会影响些形象和印象的独立性。所以有必要把这个域名映射到自己申请的外部域名上去。以下为域名映射的操作步骤：申请域名（略）在存放网页的分支里(看是个人主页还是项目主页而定)，建立一个文件，名为CNAME，内容极其简单，只有一行，即你申请的域名，如：solomonxiexie.com。然后Github会根据这个域名设置，一直替你监听这个域名的访问，然后自动帮你做所有的映射工作。然后回到你申请域名的服务商那里，找到域名的配置修改页面，修改域名的指向：修改A类域名，然后指向Github的IP地址。这个ip需要自己ping一下才知道。

作者: 一波不是一波转载请注明出处并保留原文链接（ https://github.com/riskers/bl… ）和作者信息。这篇文章教你怎么用 gitbook + travis 在 github pages 上优雅地发布书籍。模板: https://github.com/riskers/gi…效果: https://riskers.github.io/git…项目结构git clone https://github.com/riskers/gitbook-templatecd gitbbok-template && rm -rf .git # 去掉模板中的历史记录修改模板:.travis.yml:recipients: 修改成你的邮件REF: 修改你项目的 github 地址book.json: 修改 gitbook 相应配置，不是这里的重点，不多介绍。配置结果见 https://riskers.github.io/git…，可根据喜好自己修改chap01 和 chap02 对应 SUMMARY.md 中的地址，就是这本书的内容了。然后就是在 github 上新建一个项目，并且 push 上去，然后你能看见这样的项目结构:github pages如果没有注册过 github pages 服务，还要先注册（注册过程略）。新建 gh-pages 分支:git checkout -b gh-pagesgit push origin gh-pages在项目『Settings』-> 『GitHub Pages』开启 github pages 服务:<img src=“https://i.imgur.com/mLt9b1L.j...; width=“300” />Travis给这个项目开启 Travis 服务: https://github.com/marketplac…最后你应该能看到这个界面:在个人设置里申请 token 好让 Travis 有权限改这个项目：然后选择 repo，点击生成按钮:复制生成的 token，填写在 Travis 的设置-全局变量中，并且取名为 TOKEN:试试效果添加一行字:然后 push 上去，可以看到 Travis CI 在跑了:稍作等待，跑完之后，可以在 gh-pages 下看到 Travis CI 给我们推过来了 gitbook build 之后的内容:可以在 github pages https://riskers.github.io/git… 上看到效果: 完成！后续这一阵在用 gitbook 写一本电子书，发现多于两本就要收费了，而老版本是不收费的，所以我最近一直在用老版本。但可能是维护少的原因，老版本的同步总是不及时，于是我放弃了 gitbook 服务。本来想在本地 gitbook build，然后 push 到 pages 服务，但是这样太不优雅了，就琢磨了一下怎么用 CI 来做这件事，刚好之前在公司折腾过一阵 gitlab ci，很快就解决了。至此，我做到了在 master 上写 md，然后 push 到 master， Travis 自动执行 gitbook build，并且把生成好的文档 push 到 gh-pages，好让 pages 服务生效。向我捐助 | 关于我 | 工作机会 ...

前言博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。下面就开始吧~准备环境准备 node 和 git 环境，首先，安装 NodeJS，因为 Hexo 是基于 Node.js 驱动的一款博客框架，相比起前面提到过的 Jekyll 框架更快更简洁，因为天*朝网络被墙的原因尝试过安装 Jekyll 失败而放弃了。然后，安装 git，一个分布式版本控制系统，用于项目的版本控制管理，作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 Git 教程。两个工具不同的平台安装方法有所不一样，可自行了解按步骤安装，这里不详述了。安装成功后打开git bash（Windowns）或者终端（Mac），下方中将统一称为命令行。在命令行中输入相应命令验证是否成功，如果成功会有相应的版本号。git versionnode -vnpm -v安装 Hexo如果以上环境准备好了就可以使用 npm 开始安装 Hexo 了。也可查看 Hexo 的详细文档。在命令行输入执行以下命令：npm install -g hexo-cli安装 Hexo 完成后，再执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。hexo init myBlogcd myBlognpm install新建完成后，指定文件夹的目录如下：.├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 ├── package.json├── scaffolds # 模版文件夹├── source # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹| ├── _drafts # 草稿文件| └── _posts # 文章Markdowm文件 └── themes # 主题文件夹好了，如果上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览器中输入 http://localhost:4000 回车就可以预览效果了。hexo s以下是我本地的预览效果，更换了 next 主题的，默认不是这个主题。至此，你本地的博客就已经搭建成功，接下来就是部署到 Github Page 了。注册 Github首先如果你还没有 Github 账号的先注册一个，具体过程如下点击 Start project 或者下面的 new repository 创建一个新的仓库注意点来了，Github 仅能使用一个同名仓库的代码托管一个静态站点，这个网上很多教程没说到的。然后打开仓库创建一个 index.html 文件，并随意先写点内容，比如 Hello World.这个时候打开 http://你的用户名.github.io 就可以看到你的站点啦，是不是很简单！index.html 内容只是暂时的预览效果，后面把 Hexo 的文件部署上去就可以在 http://你的用户名.github.io 看到你自己的博客啦！ 比如我的就是 http://webw3c.github.io 了。配置 SSH key要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 做准备。打开命令行输入 cd ~/.ssh 如果没报错或者提示什么的说明就是以前生成过的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本机上的 SSH key 了。cat ~/.ssh/id_rsa.pub如果之前没有创建，则执行以下命令全局配置一下本地账户：git config –global user.name “用户名"git config –global user.email “邮箱地址"然后开始生成密钥 SSH keyssh-keygen -t rsa -C ‘上面的邮箱’按照提示完成三次回车，即可生成 ssh key。通过查看 ~/.ssh/id_rsa.pub 文件内容，获取到你的 SSH key（此图引用自码云）首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功。ssh -T git@github.com 到这还没完，还要登录 Github 上添加刚刚生成的SSH key，按以下步骤添加：创建一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认创建，搞定！！这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。部署到 Github此时，本地和Github的工作做得差不了，是时候把它们两个连接起来了。你也可以查看官网的部署教程。先不着急，部署之前还需要修改配置和安装部署插件。第一：打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）：第二：要安装一个部署插件 hexo-deployer-git。npm install hexo-deployer-git –save最后执行以下命令就可以部署上传啦，以下 g 是 generate 缩写，d 是 deploy 缩写：hexo g -d稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦！！开始写作博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档可以看 hexo 官网。新建文章，输入以下命令即可hexo new ‘文章标题’执行完成后可以在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件，具体用法可以在网上找一下，语法还是比较简单的。在 Markdown 文章里面输入你的文章内容再执行一下以下命令hexo ghexo s就可以看到你的文章在博客显示了，以下就是刚刚最后，只要部署到你的 Github 上就可以了！hexo cleanhexo g -d部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。另外，如果你的文章暂时不发布可以先保存在草稿里面。生成草稿的方法和文章差不多 hexo new draft “文章标题”，生成后会在 /source/_drafts 里看到你的草稿文章。当你想发布时只要执行 publish 命令即可发布到博客。hexo publish [layout] <filename>静态图床文章里用的一些图片放哪里比较好呢？比对了几个免费的图床七牛、sm.ms和微博图床，最后我决定选用微博的，七牛的好像最近是测试域名不能用了，虽然有解决方案，但怕以后还会有其他问题，所以放弃啦，毕竟免费的东西才是最贵的，特别像云储存这种东西，感觉都是钱钱钱，哈哈哈，万一有一天不让用就比较麻烦了，另外sm.ms这个口碑也不错，好像是个人开发的，免费好几年了，有同样的担心就放弃了，最好抱了新浪的大腿，感觉新浪应该会靠谱一点吧，唯一的问题就是如果有一天新浪禁止外链的话就不行了，再看吧。可以去chrome网上应用商店下载一个叫微博图床的chrome插件，下图是插件的界面，操作简单方便，具体使用看说明就可以啦，比较简单，这样图床的问题就解决了。主题配置你可以到官网主题页或者网上找你喜欢的，很多都不错，我使用的是 next 主题。你可以根据主题官网使用文档说明修改相应的配置，达到自己想要的效果。例如设置字体、开启打赏功能、添加评论系统、设置腾讯公益404页面、数据统计、内容分享等等功能。这里我说一下简单说一下我个人用到的一些配置。 一、添加评论系统 注意我现在已经改用 gitalk 啦，而下面是之前写的 valine 的教程，后面有空会更新或者增加这部分相应的内容，当然，如果你想使用的是 valine 可以继续参考下面的方法配置 添加 valine 评论系统，打开 /themes/next/_config.yml 文件，搜索 valine，开启 valine，设置 enable 为 true。然后到 leanCloud 登录或者注册 一个账号，注册后登录创建一个应用，然后进入应该到设置里面找到 AppId 和 AppKey 复制粘贴到主题配置文件里面对应的地方，就是上图中的 appid 和 appkey 这两个地方。 二、配置腾讯公益404页面 在博客根目录 /source 文件夹下创建404.html（具体内容见下图及代码）；在 html 上方加入上面3行代码；腾讯公益用到的js其实有有三个，search_children.js、data.js以及page.js，如果你的站点协议是 http 的话直接按照 next 文件的方法添加就可以了，但如果是 https 话直接添加是会报错的，因为腾讯公益404页面暂时还不支持 https，所以我直接把 page.js 的内容直接加入到页面是可以成功的，请看下图上图最前面的那几行也要加进去哦。layout: falsetitle: “404”—这里放一下上面用到的几个js链接，来自腾讯公益404官方接入文档<script type=“text/plain” src=“http://www.qq.com/404/search_children.js" charset=“utf-8” homePageUrl=“https://pojian.xyz” homePageName=“回到我的博客主页”></script><script src=“https://qzone.qq.com/gy/404/data.js" charset=“utf-8”></script><script src=“https://qzone.qq.com/gy/404/page.js" charset=“utf-8”></script>你也可以直接复制我 Github 上的404页面代码，以下是我博客的预览效果。另外如果需要自定义个性化404页面的只要删除相应腾讯的JS，直接修改上面的 404.html 文件就可以了。 三、添加字数统计和阅读时长 首先安装一个插件$ npm install hexo-symbols-count-time –save接着博客根目录下的配置文件里添加以下配置# 文章字数统计symbols_count_time: symbols: true time: true total_symbols: true total_time: true最后到 next 主题的配置文件下开启 symbols_count_time 字段重启一下 hexo 就可以看到效果啦 四、开启fancybox 打开主题配置文件搜索 fancybox 设置为 true，另外，vendors 填上对应 CDN 地址即可开启 五、文章分享 百度分享有个 https 的坑，按网上的方法把文件放到自己的服务器是我以前在其他的网站上测试过是能使用的，但在 hexo 中却报错了，具体不清楚是什么原因，感觉可能是 hexo 版本的问题，因为有的人可以，有的人报和我一样的错误，忘记截图了。因为这个功能也没有十分需要，就不继续爬了。换了 share.js 实现了同样的功能，具体可以看本文文末的效果。绑定域名如果你感觉直接使用 github.io 的域名作为你的博客链接不够专业，不够程序员的话那么就购买一个域名解析绑定到你的博客，我也比较建议这样做。我的是在阿里万网注册的，注册流程比较常规这里就不多详述了，注册登录控制台后找到你的域名，点右侧的解析按钮进去解析列表点右边的“添加记录”添加两条 CNAME 类型的记录，如上图，后面的记录值就填写你们自己的 Github 地址哈记录添加完后就要到 Github 设置绑定你购买的域名了，进入你的博客仓库点 Setting，然后拉到 GitHub Pages 那里填上你的申请购买的域名保存就可以了这里说下，当你点击保存的时候 Github Pages 会自动帮你生成一个 CNAME 的文件在根目录，里面的内容就是你绑定的域名地址注意，如果是按上面的方法操作还会有一点小问题，就是当你执行 hexo d 部署你本地的文章到 Github 时，你本地的文件会全部覆盖掉你现有仓库上的所有内容，包括 Github Pages 帮你创建的那个 CNAME 文件，这样的话当你访问域名的时候又会访问不到了。所以呢，你需要自己手动在本地根目录 /source 目录下手动创建一个 CNAME 文件，内容就是你的域名地址，因为 source 目录下的文件部署的时候是不会被删除的，所以部署的时候也会一起被部署上去，最后还需要重新到你仓库 Setting，拉到 GitHub Pages 那里再一次绑定你的域名，这样以后就没问题了。稍等一会就可以用你申请的域名就访问你的博客了！SEO优化接下来说下百度收录，据说 Github 屏蔽了百度的蜘蛛，也有的人说没，具体不是很清楚，Github 在2015的时候遭受了史上最大规模的DDoS攻击，有国外媒体指百度干的，具体不得而知啦，但感觉百度收录 Github 确认是比较难，时间也比较长，所以还是优化一下吧。一、代码同时部署到 coding那有什么方法呢？就是把博客站点同时托管在国内的 coding 平台上，这样收录就会容易很多，同时又不影响 Github 上的代码，coding 是国内的一个提供代码托管服务的平台，跟 Github 差不多。使用方法也和 Github 差不多，下面我就具体说一下怎么把代码同时部署到 coding 和 Github 上面，让百度更容易收录。注册、登录 coding 后创建一个新的仓库，注意点就是新建项目的时候命名规则和 Github 上的一样，就是 用户名.coding.me 可以看下图，还有记得别忘了添加 SSH key仓库建好后进入仓库，选左侧的 Page 服务，在设置中绑定新的域名，输入后点击绑定就可以了接着到你的域名解析控制台修改添加两条 CNAME 记录指向你的 Page 地址，看下图，注意看记录值哦，换成你自己的。最后呢修改根目录下的 _config.yml 配置文件中的部署配置，把 coding 的 git 地址添加进去就行了最后执行部署命令hexo cleanhexo g -d这时就可以在 coding 仓库中看到你提交部署的代码了，同时 你的用户名.coding.me 也可以访问你的博客站点了，这里 Github 和 coding 的代码是同时更新的，互不影响。而绑定的域名解析可能需要稍等一会才会生效。二、百度提交链接部署到 coding 后也不是百度就可以收录的，我们还需要继续优化。如果在百度搜索输入 site:你的域名 如果出现以下的效果证明就是网站还没被百度收录的，我们现在点下面的提交网址，进入百度站长工具提交。三、百度站长平台添加网站管理注册百度站长工具，并添加网站添加网站的过程有三步，主要操作集中在最后一步的网站验证方式里，我选择的是 HTML标签验证，按下面使用方法添加代码到你的网站即可而使用 next 主题的同学可以直接在主题的配置文件下搜索 baidu_site_verification 后面填上第三步中 meta 标签中 content 的值就可以最后点完成验证就可以通过了。四、添加sitemap站点地图站点地图包含了你网站上的站点链接，方便搜索引擎蜘蛛的抓取工作，搜索蜘蛛会通过网站地图中链接的深层次爬行，抓取新的内容。所以我们要生成 sitemap 文件助于网站优化，安装生成插件npm install hexo-generator-sitemap –savenpm install hexo-generator-baidu-sitemap –save接着在博客根目录下的配置文件里添加对应配置项# sitemapsitemap: path: sitemap.xmlbaidusitemap: path: baidusitemap.xml注意缩进，要不会编译报错还要修改一个根目录配置文件下的URL，url 一项的值改成你在百度站长平台里面添加的自己站点的地址，这样生成的 sitemap.xml 文件里的 url 才是你站点的地址，看下图五、添加蜘蛛协议robots.txt增加 robots.txt 文件，就是蜘蛛协议，新建 robots.txt 文件添加以下内容，把 robots.txt 放在 /source 文件下，我们前面说过 /source 目录下的文件是会被打包上传的。# hexo robots.txtUser-agent: *Allow: /Allow: /archives/Disallow: /vendors/Disallow: /js/Disallow: /css/Disallow: /fonts/Disallow: /vendors/Disallow: /fancybox/Sitemap: https://pojian.xyz/sitemap.xmlSitemap: https://pojian.xyz/baidusitemap.xmlAllow后面的就是你的menu，还有最下面的 Sitemap 地址请自行改成你们自己的地址完成后，重启hexo，执行 hexo g -d 重新生成文件并提交后，在public目录下会生成对应的xml文件。可以通过 http://xxx.com/sitemap.xml 和 http://xxx.com/baidusitemap.xml 访问到 sitemap 文件，通过 http://xxx.com/robots.txt 访问到 robots.txt 文件。可以到百度站长检测一下 robots.txt 文件是否生效六、自动推送百度有自动推送、主动推送、sitemap、手动提交几种方式。自动推送是轻量级链接提交组件，将自动推送的JS代码放置在站点每一个页面源代码中，当页面被访问时，页面链接会自动推送给百度，有利于新页面更快被百度发现。怎么安装呢？如果你的是 next 主题，只要打开主题配置文件搜索找到 baidu_push 设置为 true 即可如果你使用的不是 next 主题，也可以手动把以下代码粘贴到你的站点，一般放在 head 头部公共文件里面<script>(function(){ var bp = document.createElement(‘script’); var curProtocol = window.location.protocol.split(’:’)[0]; if (curProtocol === ‘https’) { bp.src = ‘https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = ‘http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName(“script”)[0]; s.parentNode.insertBefore(bp, s);})();</script>七、主动推送这里利用一个第三方插件 hexo-baidu-url-submit 进行主动推送安装npm install hexo-baidu-url-submit –save添加想关配置到根目录下的配置文件里# 百度链接提交-主动推送配置baidu_url_submit: count: 3 ## 提交最新的一个链接 host: pojian.xyz ## 在百度站长平台中注册的域名 token: 3GIEYsuq5ZTkvDBm ## 请注意这是您的秘钥，所以请不要把博客源代码发布在公众仓库里! path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里添加新的部署配置，注意这里跟之前有点不一样，要在 type 前添加一个破折号 -deploy: - type: git repo: github: https://github.com/webw3c/webw3c.github.io.git coding: https://git.dev.tencent.com/yusting/yusting.coding.me.git - type: baidu_url_submitter最后，执行 hexo deploy 的时候，新的连接就会被推送了。 实现原理 新链接的产生， hexo generate 会产生一个文本文件，里面包含最新的链接新链接的提交， hexo deploy 会从上述文件中读取链接，提交至百度搜索引擎八、手动推送就是直接直接把你需要提交的链接直接使用手动的方式填写提交就可以。最后你可以看到是否已经被百度成功收录了如果抓取成功了就证明已经被收录了，好像一般不会这么快，我的等了两天左右才抓取得到。九、添加百度统计添加百度统计就可以查看你网站相关的一些数据，便于你自己的站点多端同步写作内容准备中…手机编写网上好像找不到什么资料，不过通过在手机端安装 SSH 客户端远程操作服务器端，安装配置 node / git / hexo 环境编写应该可以的，原理同多台电脑编写差不多，不过这样做不太省心，不折腾了哈。结语文章到这差不多啦！后续有些小点深入学习后还是会保持更新的，希望文章对曾经像我一样的小白有那么一点帮助，技术有限，难免有纰漏，欢迎指正批评和讨论，感谢阅读！:-) ...

收藏功能用户可以保存自己喜欢的Github Page。该功能主要帮助用户在发现自己喜欢的Github Page的时候可以将这些Github Page记录下来，翻遍以后查找。手气不错功能每次使用手气不错功能，都会随机产生10个Github Page。用户可以使用这个功能探索未知的Github Page。更多信息Github Page搜索Jack Online

snakewizard.github.io贪吃蛇小游戏2. mattbasile.github.io龙珠 DragonballZ-Battle3. nathandhyou.github.io2048 online4. triciasykes.github.ioBlackJack game5. cmh5.github.ioPet Funny Game6. diegorodriguezgzz.github.ioDestreza Duo7. markokerkez.github.io石头 布 剪刀 游戏Rock Paper Scissors Game8. NamedRandom.github.ioKittens GameKittens Game是一个村庄模拟文本游戏。你管理一个小猫村，因为他们获得资源和解锁新技术。 这是一个古老的学校游戏，是多年的爱和辛勤劳动的产物。你可以在Option里面选择中文，需要自己添加翻译。9. andregregorio.github.ioMemory游戏规则：查找相同8张相同卡的最小数量;每场比赛有两次尝试;在玩家发现两张相似且连续的牌时，他将获得一分;当玩家进行8次点击（点数）时，游戏将显示玩家表现的总结;玩家仍然可以获得星星，其中包括：5星最多12次移动，4星级最多16次移动，3星级最多20次移动，2星级最多24次移动，1星级最多28次移动，29次移动零星级。10. pavuloff.github.io不错的游戏，像素风格。总结探索更多Github Page上的小游戏，点击下面的Github Page Explore - Game链接。更多信息Github Page Explore - GameGithub Page 搜索Share Code - 我的个人网站

探索功能提供了一种快速访问有意思的Github Page的途径，每周探索功能会更新有趣的搜索词条，你可以点击感兴趣的词条来获取该词条对应的Github Page。首批Github Page探索词条包括：GameOJ (Online Judge)VueCSS (Cascading Style Sheets)Resume

Cooolis.github.ioCooolis是一个操作系统命令技巧备忘录2. rfrd-tw.github.io2018 台灣公投視覺化3. confpad.github.ioConfPad:社区策划的技术会议讲座，视频，幻灯片等列表4. mazentouati.github.io个人网站This is the website’s repository for snacks console.点开之后才会发现这个网站有意思的地方。5. 1Crazy.github.io这个网站动态背景做的不错。6. wufengs.github.io网页头部滚动页面动态效果不错。7. rlcurriculum.github.io加强学习的自动化课程学习(Automated Curriculum Learning for Reinforcement Learning)8.wwcod.github.ioFaceGround - 搞笑的面部聊天！9. displayli.github.io创意设计10. achievement-hunter.github.io有意思的小游戏网站。Achievement Hunter GOTYGithub Page搜索工具Share Code - 我的个人网站

今天给大家分享几个优秀的Github Page。更多Github Page可以使用这个工具搜索 - Github Page搜索工具 https://man-ing.com/github。1. cs231n.github.iostars: 5521这个网站包含斯坦福大学CS课程的笔记和作业。2. bootflat.github.iostars: 4289BOOTFLAT是一个基于Bootstrap 3.3.0 CSS框架的开源Flat UI KIT。 它为Web开发人员提供了一种更快，更简单，重复性更低的方式来创建优雅的Web应用程序。3. huxpro.github.iostars: 3668黄玄的博客My Blog / Jekyll Themes / PWA4. tmallfe.github.iostars: 3649天猫前端5. dirtycow.github.iostars: 2275Dirty COW6. handong1587.github.iostars: 2072有趣的论文，项目，网站，博客和阅读/学习笔记。7. docker.github.iostars: 2041Docker文档的源代码库8. varharrie.github.iostars: 1752个人博客9. nndl.github.iostars: 1543《神经网络与深度学习》 Neural Network and Deep Learning10. microsoft.github.iostars: 1518Microsoft on GitHub更多信息Share CodeGithub Search Tools

Github Page索引数量目前Github Page可以索引到的数量是两万多条（26863），随着访问者使用这个工具的次数，可索引到的Github Page数量也随之增加。Github Page官网可以检索到所有的搜索结果，但是每次可以查看到的搜索结果限制在1000个（具体测试过程可以参考这篇文章），因此本工具提供了一次可以获取到更多结果的方式。更多信息Github Page搜索工具链接 https://man-ing.com/githubShare Code 我的个人网站

轮子今天造了一个轮子 – Github Page搜索工具 https://man-ing.com/github。什么是Github Page直接从GitHub存储库托管。只需编辑，推送，更改即可生效。关于Github Page的更多信息可以点击这个链接了解一下【Github Page】如何创建一个属于自己的Github PageGithub+Hexo+Next创建自己的博客关于这个轮子搜索你可以在搜索框中输入你想要查找的Github Page关键词，点击搜索Github Page按钮即可获取搜索结果。Top Github PageGithub Page搜索主页，会根据Github Page Stars的数量来进行排名，显示Top10的Github Page。Github Page信息摘要在Github Page详情页，你可以查看当前Github Page仓库的Stars数量，Score分数，以及编程语言。你还可以选择点击去Github Page站点，还是去Github Page仓库。当详情页下方是Github Page的readme信息，你也可以通过阅读这些信息来了解这个仓库的大概内容。为啥要造这个轮子就是发现其实有很多优秀的Github Page，但是比较分散，当然你也可以直接去Github官网进行搜索，这个工具提供了一种更方便的访问Github Page的方法。以后会提供更多扩展功能。更多信息Github Page搜索工具链接 https://man-ing.com/githubShare Code 我的个人网站

组件化是前端开发非常重要的一部分，从业务中解耦出来，可以提高项目的代码复用率。更重要的是我们还可以打包发布，俗话说集体的力量是伟大的，正因为有许许多多的开源贡献者，才有了现在的世界。不想造轮子的工程师，当不了合格的搬运工 。让我们来了解一下vue组件从开发到打包发布流程，并配置Github主页。本文以 vue-clock2 组件为例，欢迎star^_^~~ 项目地址目标框架：vue打包工具：webpack发布源：npm代码托管：github项目结构|– node_modules|– src| |– index.js| |– vue-clock.vue|– docs| |– index.html| |– index.css|– distsrc: 组件相关代码。node_modules: 组件依赖包。docs: 说明文档，组件简单的可以单个页面，也可以使用vuepress。dist: 打包后组件内容，一般 package.json 的 main 入口指向这个文件夹里的文件。组件开发vue组件开发相对来讲还是比较容易的，创建一个 vue-clock.vue 文件，组件的相关逻辑实现。该组件主要实现一个基于 time 属性输入，显示对应时间的钟表样式。 <div class=“clock”> <div class=“clock-circle”></div> <div class=“clock-hour” :style="{transform:hourRotate}"></div> <div class=“clock-minute” :style="{transform:minuteRotate}"></div> <b class=“hour” v-for=“h in timeList” :key=“h”> <span>{{h}}</span> </b> </div>通过元素画出钟表的样式，基于 css3的transform 属性旋转出每个时间点。因为钟表的时针并不是直接跳到下一个点的，所以需要计算出不同分钟时，时钟指针的旋转角度。后续增加了不指定时间的情况，显示当前时间并每分钟自动更新。export default { data() { return { timeList: [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], hourRotate: “rotatez(0deg)”, minuteRotate: “rotatez(0deg)” }; }, props: [“time”], watch: { time() { this.show(); } }, methods: { show() { this.showTime(); if (this._timer) clearInterval(this._timer); if (!this.time) { this._timer = setInterval(() => { this.showTime(); }, 60 * 1000); } }, showTime() { let times; if (this.time) { times = this.time.split(":"); } else { const now = new Date(); times = [now.getHours(), now.getMinutes()]; } let hour = +times[0]; hour = hour > 11 ? hour - 12 : hour; let minute = +times[1]; let hourAngle = hour * 30 + minute * 6 / 360 * 30; let minuteAngle = minute * 6; this.hourRotate = rotatez(${hourAngle}deg); this.minuteRotate = rotatez(${minuteAngle}deg); } }, mounted() { this.show(); }, destroyed() { if (this._timer) clearInterval(this._timer); }};还有一些钟表的布局样式，可以直接在项目里查看。vue-clock.vue接着我们需要抛出组件，以便在项目中引入使用。 // src/index.js import Clock from ‘./vue-clock.vue’; export default Clock; if (typeof window !== ‘undefined’ && window.Vue) { window.Vue.component(‘clock’, Clock); }这里，组件开发的部分已经完成了，喝杯咖啡，check一下代码，我们要把它打包发布到npm上。打包发布打包前确认一下 webpack 的配置文件输出。 output: { path: path.resolve(__dirname, ‘./dist’), publicPath: ‘/dist/’, filename: ‘vue-clock.min.js’, library: ‘Clock’, libraryTarget: ‘umd’, umdNamedDefine: true }打包组件文件到 dist 文件夹中。npm run buildnpm发布配置package.json{ “name”: “vue-clock2”, “description”: “Vue component with clock”, “version”: “1.1.2”, “author”: “bestvist”, “keywords”: [ “vue”, “component”, “clock”, “time” ], “main”: “dist/vue-clock.min.js”, “license”: “MIT”, “homepage”: “https://bestvist.github.io/vue-clock2/"}登录npm如果使用淘宝镜像的，需要先修正一下镜像源。npm config set registry https://registry.npmjs.org/// 查看登录人npm whoami// 登录npm login// 发布npm publish如果看到类似信息，说明发布成功。npm notice+ vue-clock2@1.1.2Github主页把项目上传到github托管，配置一份基本 README.md 说明文档。因为组件已经发布到npm上，所以可以配置几个徽章在README中。// npm 版本npm version// npm 下载量npm download更多的徽章配置可以查看shields接着描述一下组件的引入和使用方法：安装：npm install vue-clock2使用：<template> <clock :time=“time”></clock></template><script> import Clock from ‘vue-clock2’; export default { components: { Clock }, data () { return { time: ‘10:40’ } } }</script>更详细的交互或是属性说明就交给文档来解决了。在 github 项目上通过 settings 指定 GitHub Pages组件文档说明应包括：组件引入方法组件使用方法一个简单的例子组件属性描述说明总结开发 -> 发布 -> 托管一个组件轮子的制作流程大致介绍完了，希望本文可以帮助到您。原文链接 ...