https://github.com/scriptex/github-pages-vuepress
Build a static website using VuePress and deploy to Github Pages
https://github.com/scriptex/github-pages-vuepress
github-pages static-site-generator vuepress
Last synced: 6 months ago
JSON representation
Build a static website using VuePress and deploy to Github Pages
- Host: GitHub
- URL: https://github.com/scriptex/github-pages-vuepress
- Owner: scriptex
- License: mit
- Created: 2018-06-13T10:04:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-08-20T20:14:15.000Z (7 months ago)
- Last Synced: 2025-08-20T22:21:20.834Z (7 months ago)
- Topics: github-pages, static-site-generator, vuepress
- Language: JavaScript
- Homepage: https://atanas.info/portfolio/open-source/github-pages-vuepress
- Size: 3.27 MB
- Stars: 26
- Watchers: 3
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/scriptex/github-pages-vuepress)
[](https://github.com/scriptex/github-pages-vuepress/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/github-pages-vuepress/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/github-pages-vuepress&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-github-pages-vuepress-master)
[](https://www.codefactor.io/repository/github/scriptex/github-pages-vuepress)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/github-pages-vuepress/)
# VuePress Github Pages
> Use [VuePress](https://vuepress.vuejs.org/) to built a static website and deploy on [Github Pages](https://pages.github.com/).
## Visitor stats
## Code stats
## Start
Make sure that you have NodeJS and NPM or Yarn installed.
Start by forking or downloading this repository. If downloaded, extract the contents of the archive in a folder and navigate to that folder in your preferred terminal. Then:
## Install
```sh
npm install
```
or
```sh
yarn
```
## Develop
```sh
npm run start
```
or
```sh
yarn start
```
## Build
```sh
npm run build
```
or
```sh
yarn build
```
## Details
The `README.md` file in the root serves the purpose of `index.html` file.
If you wish to create new pages, you can do so by adding new `.md` files in the root.
If you wish to use a more complicated files/folders structure, make sure that you read and follow the [official docs](https://vuepress.vuejs.org/guide/directory-structure.html#default-page-routing) or just checkout how I did it in the [demo branch](https://github.com/scriptex/github-pages-vuepress/tree/demo)
VuePress builds your static website in the `/docs` folder which is set to be used by Github Pages in the repository settings.
**Important**
You can control the base dir of your site in the `.vuepress/config.js` file's `base` property.
## Demo
See this page served via Gitlab Pages on https://scriptex.js.org/github-pages-vuepress/
## Bonus: Theming
Vuepress uses [Stylus](http://stylus-lang.com/). It comes with default theme which can be easily overwritten.
Just place your styles in the `.vuepress/styles` folder.
Here are the **default theme** colors. Variables should go in the `palette.styl` file:
```stylus
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
```
Here are the colors and settings for a **Material Light** theme:
Variables should go in the `palette.styl` file:
```stylus
$accentColor = #009688
$textColor = #212121
$borderColor = #bdbdbd
$codeBgColor = #333
$bgColor = #fff
```
The rest of the styles should go in the `index.styl` file:
```stylus
html,
body,
.navbar,
.sidebar,
.theme-container .navbar,
.theme-container .sidebar
background-color $bgColor
.theme-container .search-box input
color $codeBgColor
.theme-container .search-box .suggestion a
color $accentColor
.theme-container .content code
color $bgColor
background-color $codeBgColor
```
Here are the color for a **Material Dark** theme (used in my personal website):
```stylus
/* .vuepress/styles/palette.styl */
$accentColor = #ef4c23
$textColor = #fff
$borderColor = #bdbdbd
$codeBgColor = #000
$bgColor = #263238
/* .vuepress/styles/index.styl */
html,
body,
.navbar,
.sidebar,
.theme-container .navbar,
.theme-container .sidebar
background-color $bgColor
.theme-container .search-box input
color: $codeBgColor
.theme-container .search-box .suggestion a
color: $accentColor
.theme-container .content code
background-color $codeBgColor
```
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
