124 lines
28 KiB
HTML
124 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Deploying | VitePress</title>
|
||
<meta name="description" content="Vite & Vue powered static site generator.">
|
||
<link rel="stylesheet" href="/assets/style.82fdbeb8.css">
|
||
<link rel="modulepreload" href="/assets/chunks/ui-custom.1a068566.js">
|
||
<link rel="modulepreload" href="/assets/chunks/ui-custom.30ce3a39.js">
|
||
<link rel="modulepreload" href="/assets/chunks/AlgoliaSearchBox.e5144af4.js">
|
||
<link rel="modulepreload" href="/assets/app.54944ef9.js">
|
||
<link rel="modulepreload" href="/assets/guide_deploy.md.661eacb4.lean.js">
|
||
|
||
<meta name="twitter:title" content="Deploying | VitePress">
|
||
<meta property="og:title" content="Deploying | VitePress">
|
||
</head>
|
||
<body>
|
||
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="VitePress, back to home" data-v-675d8756 data-v-cc01ef16><!----> VitePress</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Introduction</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/">What is VitePress?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/getting-started">Getting Started</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/configuration">Configuration</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/assets">Asset Handling</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/markdown">Markdown Extensions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/using-vue">Using Vue in Markdown</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/guide/deploy">Deploying</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#building-the-docs">Building The Docs</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#github-pages">GitHub Pages</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#gitlab-pages-and-gitlab-ci">GitLab Pages and GitLab CI</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#netlify">Netlify</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#google-firebase">Google Firebase</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#surge">Surge</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#heroku">Heroku</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#vercel">Vercel</a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/frontmatter">Frontmatter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/theming">Theming</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/api">API Reference</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/differences-from-vuepress">Differences from Vuepress</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" data-v-5941b830></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h1 id="deploying" tabindex="-1">Deploying <a class="header-anchor" href="#deploying" aria-hidden="true">#</a></h1><p>The following guides are based on some shared assumptions:</p><ul><li>You are placing your docs inside the <code>docs</code> directory of your project;</li><li>You are using the default build output location (<code>.vitepress/dist</code>);</li><li>VitePress is installed as a local dependency in your project, and you have setup the following npm scripts:</li></ul><div class="language-json"><pre><code><span class="token punctuation">{</span>
|
||
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token property">"docs:build"</span><span class="token operator">:</span> <span class="token string">"vitepress build docs"</span><span class="token punctuation">,</span>
|
||
<span class="token property">"docs:serve"</span><span class="token operator">:</span> <span class="token string">"vitepress serve docs"</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><h2 id="building-the-docs" tabindex="-1">Building The Docs <a class="header-anchor" href="#building-the-docs" aria-hidden="true">#</a></h2><p>You may run <code>yarn docs:build</code> command to build the docs.</p><div class="language-bash"><pre><code>$ <span class="token function">yarn</span> docs:build
|
||
</code></pre></div><p>By default, the build output will be placed at <code>.vitepress/dist</code>. You may deploy this <code>dist</code> folder to any of your preferred platforms.</p><h3 id="testing-the-docs-locally" tabindex="-1">Testing The Docs Locally <a class="header-anchor" href="#testing-the-docs-locally" aria-hidden="true">#</a></h3><p>Once you've built the docs, you may test them locally by running <code>yarn docs:serve</code> command.</p><div class="language-bash"><pre><code>$ <span class="token function">yarn</span> docs:build
|
||
$ <span class="token function">yarn</span> docs:serve
|
||
</code></pre></div><p>The <code>serve</code> command will boot up local static web server that serves the files from <code>.vitepress/dist</code> at <code>http://localhost:5000</code>. It's an easy way to check if the production build looks OK in your local environment.</p><p>You may configure the port of the server py passing <code>--port</code> flag as an argument.</p><div class="language-json"><pre><code><span class="token punctuation">{</span>
|
||
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token property">"docs:serve"</span><span class="token operator">:</span> <span class="token string">"vitepress serve docs --port 8080"</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p>Now the <code>docs:serve</code> method will launch the server at <code>http://localhost:8080</code>.</p><h2 id="github-pages" tabindex="-1">GitHub Pages <a class="header-anchor" href="#github-pages" aria-hidden="true">#</a></h2><ol><li><p>Set the correct <code>base</code> in <code>docs/.vitepress/config.js</code>.</p><p>If you are deploying to <code>https://<USERNAME>.github.io/</code>, you can omit <code>base</code> as it defaults to <code>'/'</code>.</p><p>If you are deploying to <code>https://<USERNAME>.github.io/<REPO>/</code>, for example your repository is at <code>https://github.com/<USERNAME>/<REPO></code>, then set <code>base</code> to <code>'/<REPO>/'</code>.</p></li><li><p>Inside your project, create <code>deploy.sh</code> with the following content (with highlighted lines uncommented appropriately), and run it to deploy:</p></li></ol><div class="language-bash"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br><br><br></div><pre><code><span class="token shebang important">#!/usr/bin/env sh</span>
|
||
|
||
<span class="token comment"># abort on errors</span>
|
||
<span class="token builtin class-name">set</span> -e
|
||
|
||
<span class="token comment"># build</span>
|
||
<span class="token function">npm</span> run docs:build
|
||
|
||
<span class="token comment"># navigate into the build output directory</span>
|
||
<span class="token builtin class-name">cd</span> docs/.vitepress/dist
|
||
|
||
<span class="token comment"># if you are deploying to a custom domain</span>
|
||
<span class="token comment"># echo 'www.example.com' > CNAME</span>
|
||
|
||
<span class="token function">git</span> init
|
||
<span class="token function">git</span> <span class="token function">add</span> -A
|
||
<span class="token function">git</span> commit -m <span class="token string">'deploy'</span>
|
||
|
||
<span class="token comment"># if you are deploying to https://<USERNAME>.github.io</span>
|
||
<span class="token comment"># git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main</span>
|
||
|
||
<span class="token comment"># if you are deploying to https://<USERNAME>.github.io/<REPO></span>
|
||
<span class="token comment"># git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages</span>
|
||
|
||
<span class="token builtin class-name">cd</span> -
|
||
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>You can also run the above script in your CI setup to enable automatic deployment on each push.</p></div><h3 id="github-pages-and-travis-ci" tabindex="-1">GitHub Pages and Travis CI <a class="header-anchor" href="#github-pages-and-travis-ci" aria-hidden="true">#</a></h3><ol><li><p>Set the correct <code>base</code> in <code>docs/.vitepress/config.js</code>.</p><p>If you are deploying to <code>https://<USERNAME or GROUP>.github.io/</code>, you can omit <code>base</code> as it defaults to <code>'/'</code>.</p><p>If you are deploying to <code>https://<USERNAME or GROUP>.github.io/<REPO>/</code>, for example your repository is at <code>https://github.com/<USERNAME>/<REPO></code>, then set <code>base</code> to <code>'/<REPO>/'</code>.</p></li><li><p>Create a file named <code>.travis.yml</code> in the root of your project.</p></li><li><p>Run <code>yarn</code> or <code>npm install</code> locally and commit the generated lockfile (that is <code>yarn.lock</code> or <code>package-lock.json</code>).</p></li><li><p>Use the GitHub Pages deploy provider template, and follow the <a href="https://docs.travis-ci.com/user/deployment/pages" target="_blank" rel="noopener noreferrer">Travis CI documentation</a>.</p></li></ol><div class="language-yaml"><pre><code><span class="token key atrule">language</span><span class="token punctuation">:</span> node_js
|
||
<span class="token key atrule">node_js</span><span class="token punctuation">:</span>
|
||
<span class="token punctuation">-</span> lts/*
|
||
<span class="token key atrule">install</span><span class="token punctuation">:</span>
|
||
<span class="token punctuation">-</span> yarn install <span class="token comment"># npm ci</span>
|
||
<span class="token key atrule">script</span><span class="token punctuation">:</span>
|
||
<span class="token punctuation">-</span> yarn docs<span class="token punctuation">:</span>build <span class="token comment"># npm run docs:build</span>
|
||
<span class="token key atrule">deploy</span><span class="token punctuation">:</span>
|
||
<span class="token key atrule">provider</span><span class="token punctuation">:</span> pages
|
||
<span class="token key atrule">skip_cleanup</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
|
||
<span class="token key atrule">local_dir</span><span class="token punctuation">:</span> docs/.vitepress/dist
|
||
<span class="token comment"># A token generated on GitHub allowing Travis to push code on you repository.</span>
|
||
<span class="token comment"># Set in the Travis settings page of your repository, as a secure variable.</span>
|
||
<span class="token key atrule">github_token</span><span class="token punctuation">:</span> $GITHUB_TOKEN
|
||
<span class="token key atrule">keep_history</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
|
||
<span class="token key atrule">on</span><span class="token punctuation">:</span>
|
||
<span class="token key atrule">branch</span><span class="token punctuation">:</span> main
|
||
</code></pre></div><h2 id="gitlab-pages-and-gitlab-ci" tabindex="-1">GitLab Pages and GitLab CI <a class="header-anchor" href="#gitlab-pages-and-gitlab-ci" aria-hidden="true">#</a></h2><ol><li><p>Set the correct <code>base</code> in <code>docs/.vitepress/config.js</code>.</p><p>If you are deploying to <code>https://<USERNAME or GROUP>.gitlab.io/</code>, you can omit <code>base</code> as it defaults to <code>'/'</code>.</p><p>If you are deploying to <code>https://<USERNAME or GROUP>.gitlab.io/<REPO>/</code>, for example your repository is at <code>https://gitlab.com/<USERNAME>/<REPO></code>, then set <code>base</code> to <code>'/<REPO>/'</code>.</p></li><li><p>Set <code>outDir</code> in <code>.vitepress/config.js</code> to <code>../public</code>.</p></li><li><p>Create a file called <code>.gitlab-ci.yml</code> in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content:</p></li></ol><div class="language-yaml"><pre><code><span class="token key atrule">image</span><span class="token punctuation">:</span> node<span class="token punctuation">:</span>16.5.0
|
||
<span class="token key atrule">pages</span><span class="token punctuation">:</span>
|
||
<span class="token key atrule">stage</span><span class="token punctuation">:</span> deploy
|
||
<span class="token key atrule">cache</span><span class="token punctuation">:</span>
|
||
<span class="token key atrule">paths</span><span class="token punctuation">:</span>
|
||
<span class="token punctuation">-</span> node_modules/
|
||
<span class="token key atrule">script</span><span class="token punctuation">:</span>
|
||
<span class="token punctuation">-</span> yarn install <span class="token comment"># npm install</span>
|
||
<span class="token punctuation">-</span> yarn docs<span class="token punctuation">:</span>build <span class="token comment"># npm run docs:build</span>
|
||
<span class="token key atrule">artifacts</span><span class="token punctuation">:</span>
|
||
<span class="token key atrule">paths</span><span class="token punctuation">:</span>
|
||
<span class="token punctuation">-</span> public
|
||
<span class="token key atrule">rules</span><span class="token punctuation">:</span>
|
||
<span class="token punctuation">-</span> <span class="token key atrule">if</span><span class="token punctuation">:</span> $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
|
||
</code></pre></div><h2 id="netlify" tabindex="-1">Netlify <a class="header-anchor" href="#netlify" aria-hidden="true">#</a></h2><ol><li>On <a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a>, setup up a new project from GitHub with the following settings:</li></ol><ul><li><strong>Build Command:</strong> <code>vitepress build docs</code> or <code>yarn docs:build</code> or <code>npm run docs:build</code></li><li><strong>Publish directory:</strong> <code>docs/.vitepress/dist</code></li></ul><ol start="2"><li>Hit the deploy button.</li></ol><h2 id="google-firebase" tabindex="-1">Google Firebase <a class="header-anchor" href="#google-firebase" aria-hidden="true">#</a></h2><ol><li><p>Make sure you have <a href="https://www.npmjs.com/package/firebase-tools" target="_blank" rel="noopener noreferrer">firebase-tools</a> installed.</p></li><li><p>Create <code>firebase.json</code> and <code>.firebaserc</code> at the root of your project with the following content:</p></li></ol><p><code>firebase.json</code>:</p><div class="language-json"><pre><code><span class="token punctuation">{</span>
|
||
<span class="token property">"hosting"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token property">"public"</span><span class="token operator">:</span> <span class="token string">"./docs/.vitepress/dist"</span><span class="token punctuation">,</span>
|
||
<span class="token property">"ignore"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p><code>.firebaserc</code>:</p><div class="language-js"><pre><code><span class="token punctuation">{</span>
|
||
<span class="token string-property property">"projects"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string-property property">"default"</span><span class="token operator">:</span> <span class="token string">"<YOUR_FIREBASE_ID>"</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><ol start="3"><li>After running <code>yarn docs:build</code> or <code>npm run docs:build</code>, deploy using the command <code>firebase deploy</code>.</li></ol><h2 id="surge" tabindex="-1">Surge <a class="header-anchor" href="#surge" aria-hidden="true">#</a></h2><ol><li><p>First install <a href="https://www.npmjs.com/package/surge" target="_blank" rel="noopener noreferrer">surge</a>, if you haven’t already.</p></li><li><p>Run <code>yarn docs:build</code> or <code>npm run docs:build</code>.</p></li><li><p>Deploy to surge by typing <code>surge docs/.vitepress/dist</code>.</p></li></ol><p>You can also deploy to a <a href="https://surge.sh/help/adding-a-custom-domain" target="_blank" rel="noopener noreferrer">custom domain</a> by adding <code>surge docs/.vitepress/dist yourdomain.com</code>.</p><h2 id="heroku" tabindex="-1">Heroku <a class="header-anchor" href="#heroku" aria-hidden="true">#</a></h2><ol><li><p>Install <a href="https://devcenter.heroku.com/articles/heroku-cli" target="_blank" rel="noopener noreferrer">Heroku CLI</a>.</p></li><li><p>Create a Heroku account by <a href="https://signup.heroku.com" target="_blank" rel="noopener noreferrer">signing up</a>.</p></li><li><p>Run <code>heroku login</code> and fill in your Heroku credentials:</p></li></ol><div class="language-bash"><pre><code>$ heroku login
|
||
</code></pre></div><ol start="4"><li>Create a file called <code>static.json</code> in the root of your project with the below content:</li></ol><p><code>static.json</code>:</p><div class="language-json"><pre><code><span class="token punctuation">{</span>
|
||
<span class="token property">"root"</span><span class="token operator">:</span> <span class="token string">"./docs/.vitepress/dist"</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p>This is the configuration of your site; read more at <a href="https://github.com/heroku/heroku-buildpack-static" target="_blank" rel="noopener noreferrer">heroku-buildpack-static</a>.</p><ol start="5"><li>Set up your Heroku git remote:</li></ol><div class="language-bash"><pre><code><span class="token comment"># version change</span>
|
||
$ <span class="token function">git</span> init
|
||
$ <span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
|
||
$ <span class="token function">git</span> commit -m <span class="token string">"My site ready for deployment."</span>
|
||
|
||
<span class="token comment"># creates a new app with a specified name</span>
|
||
$ heroku apps:create example
|
||
|
||
<span class="token comment"># set buildpack for static sites</span>
|
||
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
|
||
</code></pre></div><ol start="6"><li>Deploy your site:</li></ol><div class="language-bash"><pre><code><span class="token comment"># publish site</span>
|
||
$ <span class="token function">git</span> push heroku main
|
||
|
||
<span class="token comment"># opens a browser to view the Dashboard version of Heroku CI</span>
|
||
$ heroku <span class="token function">open</span>
|
||
</code></pre></div><h2 id="vercel" tabindex="-1">Vercel <a class="header-anchor" href="#vercel" aria-hidden="true">#</a></h2><p>To deploy your VitePress app with a <a href="https://vercel.com/docs/concepts/git" target="_blank" rel="noopener noreferrer">Vercel for Git</a>, make sure it has been pushed to a Git repository.</p><p>Go to <a href="https://vercel.com/new" target="_blank" rel="noopener noreferrer">https://vercel.com/new</a> and import the project into Vercel using your Git of choice (GitHub, GitLab or BitBucket). Follow the wizard to select the project root with the project's <code>package.json</code> and override the build step using <code>yarn docs:build</code> or <code>npm run docs:build</code> and the output dir to be <code>./docs/.vitepress/dist</code></p><p><img src="/assets/vercel-configuration.e8badd11.png" alt=""></p><p>After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.</p><p>Once deployed, you will get a URL to see your app live, such as the following: <a href="https://vitepress.vercel.app" target="_blank" rel="noopener noreferrer">https://vitepress.vercel.app</a></p></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><a class="link" href="https://github.com/vuejs/vitepress/edit/main/docs/guide/deploy.md" target="_blank" rel="noopener noreferrer" data-v-1ed99556>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc><p class="last-updated" data-v-07c132fc data-v-abce3432><span class="prefix" data-v-abce3432>Last Updated:</span><span class="datetime" data-v-abce3432></span></p></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/guide/using-vue" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>Using Vue in Markdown</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/guide/frontmatter" data-v-38ede35f><span class="text" data-v-38ede35f>Frontmatter</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17><div class="bsa-cpc" data-v-4ce5ad17></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div>
|
||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_algolia-search.md\":\"da33e9e2\",\"config_basics.md\":\"8b6d1758\",\"config_carbon-ads.md\":\"2699d04a\",\"config_homepage.md\":\"2f01ca2d\",\"guide_api.md\":\"03e88529\",\"guide_assets.md\":\"aae76804\",\"guide_configuration.md\":\"bb340dd8\",\"guide_deploy.md\":\"661eacb4\",\"guide_differences-from-vuepress.md\":\"459a9c4a\",\"guide_frontmatter.md\":\"07dc76f0\",\"guide_getting-started.md\":\"f9753073\",\"guide_global-component.md\":\"01405ea5\",\"guide_markdown.md\":\"6ff83e9e\",\"guide_theming.md\":\"b28ff51e\",\"guide_using-vue.md\":\"74e82a4f\",\"index.md\":\"9a001cbe\"}")</script>
|
||
<script type="module" async src="/assets/app.54944ef9.js"></script>
|
||
|
||
</body>
|
||
</html> |