HN Explorer

Ask HN: How to deploy a single web page in 2019?

34 points by laurentdc ↗ HN
So, I've made a internal web page for a friend's company.

It's a index.html with a Bootstrap hero image and responsive grid, then there's a index.js with some Vue.js glue logic (get a .json file and populate the Bootstrap grid) and of course some custom css in a custom.css file. Maybe 150-200 lines of code tops.

I could just FTP this to the server nginx folder, or git push to my repo and pull it on the server, and that would work fine. But I've noticed everyone else is doing it differently: should I use npm to install Bootstrap and Vue instead of having them downloaded manually in a css/ and js/ folder? Do people still use bower? Should I use webpack and how do I make webpack come together, like, place scripts and custom css in the right order? Should I just build it all around Vue.js and install bootstrap-vue and use those components instead, and then npm build and deploy the dist/ folder? Do I Dockerize all this and reverse proxy it behind the existing Nginx instance?

Sorry if this sounds like parody but I'm really confused :/

27 comments

[ 2.6 ms ] story [ 66.6 ms ] thread
codegladiator
Yes, use vue cli to generate the skeleton app, it will add all the things you mentioned like webpack. Then use Travis or circle ci to build the app, finally setup a kubernetes cluster so you can deploy your docker image easily plus get ssl certificate and other benefits quickly. Now you can call this an app instead of web page.

Who even does just a html?

bradwood
K8s for a single “web page”? Really?
codegladiator
No questions for vue cli for a single "web page"? Really? Or even ci/cd?
gitzen
I recommend ending your comment with "/s" to indicate sarcasm or you run the risk of getting downvoted due to Poe's Law.
bradwood
Build a ci/cd pipeline in gitlab-ci or travis to push it to s3. Mix in a bit of terraform to set up ssl, s3, route53, etc
[deleted]
(comment deleted)
krapp
Stop worrying about what "everyone else" is doing. FTP and Git push/pull are perfectly fine for something like this.

All of those other tools and techniques apply to companies wanting to efficiently organize and deploy projects at scale. If your friend's company is fine with what is essentially just a static brochure page, then that added complexity is unnecessary.

gitzen
This is very good advice. I am beginning to become worried that hobby projects now consider using heavyweight tools that make sense in companies.

If you're only going to build a simple app for friends and family as a hobby which would receive less than 10000 hits in a day, Kubernetes cluster seems like an overkill. CI (automated builds and tests) could still offer some advantages to maintain good long term health of the hobby project.

But other than that just copying over the files or pulling it from Git sounds just fine. Perhaps even go for a cheaper option like Linode or Digital Ocean for hosting instead of AWS/GCP/Azure.

gshdg
Why host it on anything more complex than S3? You don’t need a “real” server for this. The most you need is a cheapo $2/mo shared hosting account.
gitzen
SCPing or Git push/pull is exactly how I would do this.

> Sorry if this sounds like parody but I'm really confused :/

Thanks for this clarification. It did seem like parody until I read this clarification. :-)

slap_shot
Build it however you're comfortable with and push it to Heroku however you're comfortable with.
rahimnathwani
Host it on Netlify. Netlify can watch for GitHub commits and automatically deploy new versions. It can also run a build command and deploy the output, if the stuff you want deployed isn't already in the commit.

Netlify is cheap ($0/month), easy to use, and has its own CDN.

quickthrower2
Plus one. I use Netlify for about 6 sites ranging from single page to 10k pages and it works beautifully. For a single static HTML page it’ll do a great job plus it handles DNS entries with a nice UI so you can set up MX. If you need mail I recommend Zoho as they have a free tier for a single domain
powerslacker
Came here to say this. As an added bonus you can set up Forestry to connect to your page if you use a static site generator. Its unbeatable.
codegeek
"I could just FTP this to the server nginx folder"

Yep pretty much this. Yes there are some services like netlify that makes it a bit more easier but then you have less control and no fun. I would setup nginx to serve the static files, use letsencrypt to install SSL cert. and done.

iKevinShah
Occam's razor!
sarahhudson
Setting up SSL yourself, even with the wonderful scripts from Let's Encrypt, isn't the simplest solution IMO.
ryanmccullagh
My side project does exactly this. You push to GitHub and your changes are deployed automatically. You built your assets locally, and then push your production code to GitHub.

I’ll give you the link to my project. https://www.amezmo.com

recov
Personally I set up a dokku instance on a cheap vps. Very similar to heroku but allows multiple projects to be run. On commit gitlab pushes to my dokku instance and it's deployed.

What ever method you choose, I definitely recommend a CD pipeline on commit.

niklasmtj
Since you mentioned that this would be an internal web page for your friend's company Netlify does not seem to be the best answer for that. When there is already a working nginx just push it via FTP. If you know how this is done, do it like that.

Sure there are those "cool" new ways but when you know how this could be done in a way you are familiar with go for it.

But if you have the time and the page does not have to be running asap go that way with building it around Vue.js and webpack etc.

sergiotapia
i use netlify, connect it to the github repo, build static assets, you're done.
wolco
Two concepts:

Deployment and frontends.

For deployment In the setup you have now you should git or ftp over the files. Any larger complex setup will require hiring someone. Any easy deployable sass solution will work against you interally.

Frontend tooling Frontend tooling has changed and become more complex. What people do is use npm to get the vue cli tool and use that to create the single page application. Unless you want to use sass include bootstrap from html and include fontawesome lib and create a style.css that overrides whatever style changes you neex.

throw03172019
I use s3_website. Configures and deploys to S3 with option to serve via CloudFront.
[dead] skaffolder
If it is a static web page you can try the free hosting of Firebase
barli
try Pingy, it's at pin.gy