Skip to content
Ukrainian landing page for Bible First.
Vue JavaScript CSS Shell
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
yarn.lock is the official web site for the Ukrainian edition of Bible First, a distance-learning course based on the book of Genesis. screenshot


This site is a universal Vue.js application built with Nuxt.js, and is deployed as a pre-generated static site on Amazon S3. In addition to Vue and Nuxt, several noteworthy supporting technologies have been used, including the following:



To get started, clone/fork the repo, cd into it, and install the dependencies.

$ yarn install


Nuxt uses Webpack as its build tool, and is also pre-configured for hot module replacement. To begin, start the development server on localhost:3000:

$ yarn dev

Static Build

In addition to deploying server-rendered apps, Nuxt also works great as a static site generator. That's how we're using it here. To pre-render the entire site as static HTML, CSS, and JavaScript files, run this command:

$ yarn generate

The generated site will be output to the dist/ folder.

Local HTTP Server

Sometimes in development it can be helpful to run the statically generated site with a local web server, simulating a production environment. I have found http-server to be a great choice. Here's how I build and serve the static site on my local machine.

First, install http-server globally if you don't already have it.

$ npm install http-server -g

Next, build the site as explained in the previous section.

$ yarn generate

Finally, move into the dist/ folder and start the server.

$ cd dist/
$ http-server -p 8080

Visit http://localhost:8080 and check out the site!

Environment-specific Builds

Nuxt allows you to define environment variables which can be accessed at compile time by calling process.env.YOUR_VARIABLE. This is particularly useful for generating builds with specifics that differ between, for example, production and staging environments.

To generate a production build, run:

$ APP_ENV=production yarn generate

This will, among other things, set the robots meta tag to index,follow. If APP_ENV is set to anything else, the robots tag will be set to noindex,nofollow.


Our preferred deployment solution for static sites is Amazon S3. It's super cheap, and provides lots of nice extras like a CDN with CloudFront and a free SSL certificate. The Nuxt docs provide a detailed guide to deployment with S3 + Cloudfront.

Individual deploys are handled with the bin/deploy script, which calls the gulp deploy task provided by gulp-awspublish. The bin/deploy script expects the environment to be passed as an argument.

# Deploy to development
$ bin/deploy dev

# Deploy to production
$ bin/deploy prod

For more information on deployment with Nuxt, visit their FAQ page.


This site was developed in tandem with and these two projects were my first using Vue.js and Nuxt.js. In learning these technologies, I consulted a variety of blog posts, online tutorials, and video courses — some paid, others free. By the far the most thorough and effective for me were two courses on Udemy by Maximilian Schwarzmüller:

If you want to learn Vue/Nuxt, I highly recommend these courses. Max is a great instructor, very thorough and engaging. His lessons are informative and a real pleasure to listen to. Thank you Max!


Bible First is a registered trademark of Euro Team Outreach, Inc.

© 2018 Euro Team Outreach, Inc. Software is licensed under MIT.

You can’t perform that action at this time.