github-pages-vuepress

Travis CI Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

VuePress Github Pages

Use VuePress to built a static website and deploy on Github Pages.

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

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

npm install

or

yarn

Develop

npm run start

or

yarn start

Build

npm run build

or

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 or just checkout how I did it in the demo branch

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. 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:

$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:

$accentColor = #009688
$textColor = #212121
$borderColor = #bdbdbd
$codeBgColor = #333
$bgColor = #fff

The rest of the styles should go in the index.styl file:

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):

/* .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:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image