欧洛奇 發表於 2019-11-16 00:59:00

将`VuePress`建立的博客部署到GitHub或Gitee上

<h1 id="将vuepress建立的博客部署到github或gitee上">将<code>VuePress</code>建立的博客部署到GitHub或Gitee上</h1>
<p>在上一篇中，我们详细介绍了如何利用<code>VuePress</code>搭建起个人博客系统，但这只是在本地debug启动的，接下来，我们把它部署到<code>Github</code>网站。</p>
<ul>
<li>
<p>在<code>config.js</code>中配置<code>base</code></p>
<pre><code class="language-js">base: '/v-blog/',
</code></pre>
<p><code>v-blog</code>是我Github上的仓库名</p>
</li>
<li>
<p>编写自动化脚本</p>
<p>在根目录<code>/v-blog/</code>下我们需要编写两个脚本</p>
<p>因为写在一个脚本里话编译完会直接退出，<br>
所以把编译的命令单独放在另外一个脚本文件里调就可以了</p>
<ul>
<li>
<p>build.bat</p>
<pre><code class="language-bat">@echo off
vuepress build docs
</code></pre>
</li>
<li>
<p>deploy.bat</p>
<pre><code class="language-bat">@echo off

echo building...
call build.bat
echo building-complete.

cd docs/.vuepress/dist
git init
git add -A
git commit -m 'auto-deploy'
git remote add origin https://github.com/CoderMonkie/v-blog.git
git pull
git push --force origin HEAD:gh-pages

REM To delete the dist folder
cd ..
echo delete-directory: "%cd%/dist"
rmdir /s /q "%cd%/dist"
cd..
cd..
echo Auto-Deploy-Complete!
pause
</code></pre>
</li>
</ul>
<p>然后，只要双击执行<code>depploy.bat</code>就可以。<br>
或者配置到<code>package.json</code>的<code>scripts</code>中。</p>
<pre><code class="language-json">"scripts": {
"deploy": "deploy.bat"
}
</code></pre>
<pre><code class="language-bat">npm run deploy
</code></pre>
<p>编译完成提及到远程的时候，会提示输入用户名密码。<br>
(或者保存登录权限信息使其静默推送)</p>
</li>
<li>
<p>GitHub中本项目的<code>setting</code>下确认</p>
<p>我们在push时设为推送到<code>gh-pages</code>分支，<br>
此时，<code>v-blog</code> -- <code>setting</code>下的<code>GitHub Pages</code>设置，<br>
应该为<code>gh-pages</code>选中状态，不是的话改为<code>gh-pages</code></p>
<p>这样就完成了。如果<code>GitHub Pages</code>设置页显示：</p>
<pre><code>Your site is published at https://codermonkie.github.io/v-blog/
</code></pre>
<p>那么说明网站发布了，可以查看。</p>
<pre><code>Your site is ready to be published at https://codermonkie.github.io/v-blog/.
</code></pre>
<p>那么说明<code>GitHub</code>还没有完成给你发布，访问的话会是404，<em>等待吧。</em></p>
</li>
</ul>
<hr>
<p>(深夜)更新：已经好了v-blog<br>
在<code>GitHub Pages</code>/<code>source</code>的下拉框里切换了几次，不经意间发现已经发布了。</p>
<hr>
<h3 id="补充">补充：</h3>
<p>补两张图，看起来能更简明，直截了当。</p>
<ul>
<li>
<p>GitHub</p>
<p>在【Setting -- GitHub Pages】的Source的下拉框中选择要使用的分支<br>
（也可以branch/docs文件夹，不过我们VuePress生成的博客嘛直接用分支了）<br>
<img src="https://images.cnblogs.com/cnblogs_com/CoderMonkie/1591926/o_github-pages-setting.png"></p>
</li>
<li>
<p>Gitee</p>
<p>在【服务 -- Gitee Pages】点【启动】<br>
<img src="https://images.cnblogs.com/cnblogs_com/CoderMonkie/1591926/o_gitee-pages-start.png"></p>
<p>更新网站的话静态文件推送后要点【更新】<br>
<img src="https://images.cnblogs.com/cnblogs_com/CoderMonkie/1591926/o_gitee-pages-update.png"></p>
</li>
</ul>
<hr>
<h3 id="如果是要将博客部署到gitee">如果是要将博客部署到Gitee：</h3>
<p>除了我们可以同时提交到两个远程（GitHub和Gitee仓库），<br>
关联多个远程仓库，实现一次push多站提交<br>
也可以在同一个工程文件里实现两个远程仓库的部署。</p>
<p>将上面给出的脚本<code>deploy.bat</code>，另存一份<code>deploy-gitee.bat</code>,<br>
修改一下，主要有两处：</p>
<ul>
<li>远程地址（github -&gt; gitee 的地址）</li>
<li>提交到的远程分支名（gh-pages -&gt; v-blog-pages）</li>
</ul>
<pre><code class="language-bat">@echo off

echo building...
call build.bat
echo building-complete.

cd docs/.vuepress/dist
git init
git remote add origin https://gitee.com/coder-monkey/v-blog.git
git add -A
git commit -m 'auto-deploy'
git pull
git push --force origin HEAD:v-blog-pages

REM To delete the dist folder
cd ..
echo delete-directory: "%cd%/dist"
rmdir /s /q "%cd%/dist"
cd..
cd..
echo Auto-Deploy-Complete!
pause
</code></pre>
<p><code>package.json</code>里加<code>scripts</code>一个命令</p>
<pre><code class="language-json">"scripts": {
"deploy-gitee": "deploy-gitee.bat"
}
</code></pre>
<p>双击执行<code>deploy-gitee.bat</code>或以下：</p>
<pre><code class="language-bat">npm run deploy-gitee
</code></pre>
<p>再稍微动动手脚本稍作修改就可以实现一次命令多个远程部署了~</p>
<hr>
<blockquote>
<p><code>auto-deploy.bat</code>最终版：</p>
</blockquote>
<pre><code class="language-bat">@echo off

echo building...
call build.bat
echo building-complete.

cd docs/.vuepress/dist

git init
git config user.name maonianyou
git config user.email maonianyou@foxmail.com
git add -A
git commit -m "%date% %time% auto-deploy"
REM 静默推送的话可在地址里填入username和password,如
REM git remote add origin https://username:password@gitee.com/username/repo.git
git remote add origin https://gitee.com/coder-monkey/v-blog.git
git pull
git push --force origin HEAD:v-blog-pages
echo "Gitee Pages Deploy Complete!"

REM 部署完上面的 Gitee Pages
REM 需要删除 .git 文件夹
REM 以备部署 GitHub Pages 再次初始化时用
rmdir /s /q "%cd%/.git"

git init
git config user.name maonianyou
git config user.email maonianyou@gmail.com
git add -A
git commit -m "%date% %time% auto-deploy"
REM 静默推送的话可在地址里填入username和password,如
REM git remote add origin https://username:password@github.com/username/repo.git
git remote add origin https://github.com/CoderMonkie/v-blog.git
git pull
git push --force origin HEAD:gh-pages
echo "GitHub Pages Deploy Complete!"

REM To delete the dist folder
cd ..
echo delete-directory: "%cd%/dist"
rmdir /s /q "%cd%/dist"
cd..
cd..
echo Auto-Deploy-Complete!
pause
</code></pre>
<pre><code class="language-json">"scripts: {
    "deploy": "auto-deploy.bat"
}
</code></pre>
<pre><code class="language-cmd">npm run deploy
</code></pre>
<hr>
<blockquote>
<p>还能继续改进？</p>
</blockquote>
<ul>
<li>
<p><code>package.json</code>/<code>scripts</code><br>
加一条，执行<code>git push</code>和<code>auto-deploy.bat</code><br>
这样推送加部署就一口气完成啦</p>
</li>
<li>
<p>使用<code>netlify</code>或者<code>travis-ci</code>这样的工具<br>
<code>GitHub</code>的<code>WebHook</code>也要了解一下</p>
</li>
</ul>
<p>更多好玩的，赶快来探索吧~</p>


</div>
<div id="MySignature" role="contentinfo">
    <style>.signature { background-color: lightskyblue; padding: 10px; display: inline-flex; border: 1px dashed red }
.emphersize { font-weight: bold; color: darkblue }</style>
    <div class="signature" style="display: flex">
      <div>
            <p>作者：<span class="emphersize">码路工人</span></p>
            <p>公众号：<span class="emphersize">码路工人有力量（Code-Power）</span></p>
            <p>欢迎关注个人微信公众号 Coder-Power</p>
            <p>一起学习提高吧~</p>
      </div>
      <img src="https://gitee.com/Coding-Worker/picture/raw/master/2021-1-5/1609860559027-qrcode_for_gh_e1903e0c25a7_258.jpg">
    </div><br><br>
来源：https://www.cnblogs.com/CoderMonkie/p/deploy-vuepress-blog.html
頁: [1]
查看完整版本: 将`VuePress`建立的博客部署到GitHub或Gitee上