Ukrainian landing page for Bible First.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
bin
components
layouts
middleware
pages
plugins
static
store
.editorconfig
.eslintrc.js
.gitignore
.stylelintrc
LICENSE
README.md
nuxt.config.js
package.json
postcss.config.js
robots-dev.txt
robots-prod.txt
tailwind.js
yarn.lock

README.md

bibliya.net.ua

bibliya.net.ua is the official web site for the Ukrainian edition of Bible First, a distance-learning course based on the book of Genesis.

bibliya.net.ua screenshot

Overview

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:

Requirements

Setup

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

$ yarn install

Development

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.

Deployment

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.

Individual deploys are handled with the bin/deploy script, which basically wraps the AWS CLI, using the aws s3 sync command to copy files up to the appropriate bucket. The bin/deploy script expects the environment to be passed as an argument.

# Deploy to staging
$ bin/deploy staging

# Deploy to production
$ bin/deploy production

The deploy script handles properly setting the aforementioned APP_ENV variable, as well as supplying the appropriate robots.txt file.

Code Style and Linting

Project-specific JavaScript conforms to the Standard code style.

JavaScript Style Guide

JS linting is done with ESLint and extended with eslint-plugin-vue and eslint-plugin-standard.

CSS linting is done with stylelint.

I use Neovim as my editor along with the ALE plugin for asynchronous linting.

Acknowledgments

This site was developed in tandem with dobroizlo.com.ua 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!

Legal

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

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