GitHub Pages is an exceptional tool when it comes to the deployment of static pages. Today, we will be showcasing a step-by-step walkthrough to deploy a Vue.js application on GitHub Pages.
Step 1: Setting up the GitHub Repository
Before initiating the deployment process, the first step involves setting up a new repository on GitHub. Here is how you do it:
- Navigate to the top-right corner of the GitHub page, click on the ‘+’ button and select ‘New Repository’.
- Provide an appropriate name for the repository. You can also choose the repository’s visibility (public or private) based on your requirements.
- Upon completion of the form, click ‘Create Repository’.
For the purpose of this guide, we already have a Vue.js repository that we will deploy, which can be found at (https://github.com/iamgeoknight/vue-layers) which we have created using vitejs
Step 2: Building the Vue.js Application
To build your Vue.js application:
- Open a terminal and clone the repository in your local machine.
- Navigate to your project’s directory and install the necessary dependencies using
npm install. - Run
npm run build. This command will create adistdirectory containing the built project files.
Step 3: Pushing the Application to GitHub
To upload your local application to the GitHub repository:
- Initialize your project directory as a Git repository using
git init. - Add the files to the repository using
git add -A. - Commit the files using
git commit -m "Initial commit". - Link your local repository to your GitHub repository using
git remote add origin https://github.com/<your-username>/<your-repository-name>.git, substituting<your-username>with your GitHub username and<your-repository-name>with your GitHub repository name. - Push the files to the repository using
git push -u origin master.
Step 4: Deploying the Application with GitHub Pages
To deploy your Vue.js application with GitHub Pages:
- Go to the settings of your GitHub repository.
- Scroll down to the GitHub Pages section.
- Under ‘Source’, select the branch you want to deploy from. In most cases, this will be the
masterbranch. If you’re deploying a built Vue.js/React.js app, it could be thegh-pagesbranch. - Click ‘Save’.
Step 5: Accessing the Deployed Application
Upon successful deployment, your Vue.js application will be accessible at https://<your-username>.github.io/<your-repository-name>/.
Please note, the base in vite.config.ts will need to be adjusted if you’re deploying to a subfolder. For example, if you’re deploying to https://<your-username>.github.io/<your-repository-name>/, set base to '/<your-repository-name>/<directory>'. In our case, the base value is ‘/vue-layers/dist/’
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [vue(), vueJsx()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, base: '/vue-layers/dist/' }) |
It’s important to keep in mind that GitHub Pages is specifically designed for static websites, so it won’t handle server-side logic or databases.
In conclusion, GitHub Pages is an excellent tool for deploying static applications such as Vue.js. By following these steps, you can easily share your Vue.js applications with others. Happy coding!
I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru.