DEV Community

How I use Vue.js on GitHub Pages

Tim Bachmann on May 04, 2019

I recently read the Article Serving Vue.js apps on GitHub Pages and it inspired me to write about what I'm doing differently. If you want to see a...
Collapse
 
ikirker profile image
Ian Kirker

For the next level of automation, if you set up deploy keys and Travis CI, you can encrypt the private key using Travis’s tools, check the encrypted file into the repo, and then have this script run on Travis every time the master branch is changed (along with a snippet to decrypt the key for use).

Collapse
 
tiim profile image
Tim Bachmann

Yes exactly!
Or even better use the functionality that's already built into Travis CI:

TravisCI Github Pages Deployment

Collapse
 
ikirker profile image
Ian Kirker

Oh, neat, thanks, I hadn’t seen that!

We might still have to use the keys, for organisational repositories, but it’s definitely something I’ll look at.

Thread Thread
 
tiim profile image
Tim Bachmann

Yeah it's both pretty much the same so no real drawbacks either way.

Collapse
 
pjcalvo profile image
Pablo Calvo

Hey man,

Great post. Really made the trick. To automate the process, i decided to have develop as the dev code branch and then push the dist to master where bitbucket picks it up.

And then using github actions I run this script:

cd dist
git init
git remote add origin git@github.com:coffeestainio/coffeestainio.github.io.git
git add .
git commit -m 'new deploy'
git push --set-upstream origin master -f

And it is automated I can also send over the github pipeline script if you want it.

Collapse
 
nycbeardo profile image
M. Stevens

I have a question, what would be the benefits of turning your personal site into a VueJS app as opposed to React?

Collapse
 
tiim profile image
Tim Bachmann

I don't think there are any clear advantages for any of the two. It comes down to preference.

For me personally I really like the structure of Vue because it still kinda seperates html from javascript. I'm not a big fan af jsx.

Collapse
 
phiter profile image
Phiter Fernandes

I would say the main advantage is using Vue instead of React. It's all about your preference in this case, but I would always go with Vue.

Collapse
 
akinhwan profile image
Akinhwan

how do you serve images? I'm getting confused between /static and /assets. the href I set in the html part of my component works correctly, but in the css section the url i set for background image is not finding in the same path

Collapse
 
tiim profile image
Tim Bachmann

The static/ folder is for files like images and css that should not be touched by webpack where as files in the assets/ directory will be processed.

Collapse
 
quiquee profile image
Enrique Melero

Great article ! And very helpful
Thanks !

Collapse
 
montoulieu profile image
Pieter Montoulieu

Thanks for this dude!
I just recently migrated my personal site to a GitHub user page on master and couldn't figure out a way to get it load properly! 🤘

Collapse
 
tiim profile image
Tim Bachmann

I'm glad I could help 👍

Collapse
 
kamalhm profile image
Kamal

Awesome, thanks!

Collapse
 
tiim profile image
Tim Bachmann

Yeah you have to do this in Vue too, but that's the standard setting in the vue cli so I didn't mention it here.

Collapse
 
flamendless profile image
Brandon

Hi, but why does it fail to work when we set custom domain?

Collapse
 
kayjay89 profile image
Kevin Jacobs • Edited

I seem to fail at getting it to work.

I see my page without content. But it isn't pulling in the data via an API on a different server.

Collapse
 
tiim profile image
Tim Bachmann

Take a look at the error(s) in the dev console. Maybe they are helpful :)