Use VuePress to built a static website and deploy on Github Pages.
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:
npm installor
yarnnpm run startor
yarn startnpm run buildor
yarn buildThe 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 VuePress usage reference.
VuePress builds your static website in the /docs folder which is set to be used by Github Pages in the repository settings.
See this page server via Gitlab Pages on https://scriptex.github.io/github-pages-vuepress/
Vuepress uses Stylus. It comes with default theme which can be easily overwritten.
Just place your styles in the override.styl file in the .vuepress folder.
Here are the default theme colors:
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34Here are the colors and settings for a Material Light theme:
$accentColor = #009688
$textColor = #212121
$borderColor = #bdbdbd
$codeBgColor = #333
$bgColor = #fff
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 $codeBgColorHere are the color for a Material Dark theme (used in my personal website):
$accentColor = #ef4c23
$textColor = #fff
$borderColor = #bdbdbd
$codeBgColor = #000
$bgColor = #263238
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 $codeBgColorMIT