Skip to content
Landing page for the Ukrainian translation of Good and Evil.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
bin
components
layouts
middleware
pages
plugins
static
store
.editorconfig
.eslintrc.js
.gitignore
.npmrc
.stylelintrc
LICENSE
README.md
nuxt.config.js
package.json
postcss.config.js
robots-dev.txt
robots-prod.txt
tailwind.js
yarn.lock

README.md

dobroizlo.com.ua

dobroizlo.com.ua is the official web site for the Ukrainian translation of Good and Evil.

dobroizlo.com.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 bibliya.net.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

Good and Evil was written by Michael Pearl. Copyright © 2008, 2018 Michael and Debi Pearl.

Good and Evil in Ukrainian (Добро і зло) is printed and distributed by Euro Team Outreach, Inc.

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

You can’t perform that action at this time.