LJournal

Personal blog built with ReactJS and Gatsby.

Why document and open source my blog site?

Part of the belief that OSS is the future and also fosters a community of developers, on top of which not only allows growth, but learnings. And with any OSS, it is important that a document is created to allow contributors to jump on board easily.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Clone the repository:

# if using ssh
git clone git@github.com:BrianLusina/brianlusina.github.io.git
# or if using https
git clone https://github.com/BrianLusina/brianlusina.github.io.git

Prerequisites

A couple of things you will need to install in order to run this project:

1. Node and NPM

   Node is a JavaScript Runtime Environment. Installation instructions can be found in the link provided. By installing Node, you will also be installing npm. Node version used is 10.x

2. Yarn - (Optional)

   Yarn is an alternative package manager to npm. It is not necessary to use, but, if you prefer using yarn, then follow the instructions set out in the download section of the link provided. It is advised, that one package manager is picked due to how differently the dependency graph is managed by both.

Installing

Installing dependencies is straight forward:

npm install
# or
yarn install

This should set you up to install the dependencies as needed and get you running.

Running tests

Tests have been written with Jest and Enzyme. Running the tests can be done as follows:

yarn test
# or
npm run test

To generate a coverate report:

yarn test:cover
# or
npm run test:cover

Deployment

Deployment has been configured to work on any system or static server as necessary. Therefore deployment can be to either a microservice application with this running in its own container, or to a static site or to even github pages.

The pipeline set here is to deploy this to a seperate static server when in development in order to do testing and to github pages when finally moving to production. Ideally,this being a blog site which primarily serves static content, that should not matter where it is deployed, as long as it is accessible and can handle incoming traffic.

Tools used for deployment:

• Docker

  There is a Dockerfile available at the root of the project. Which entails instructions on how to deploy this to a system/server that supports running dockerized applications.

• Surge

  Surge is a static hosting site and is used when deploying in development. In order to use this, ensure that you have an account with surge and have the necessary credentials in order to deployto a static site. In its place, any other static hosting site can be used, e.g. Netlify.

  To publish directly, you can use:

  yarn publish:staging

  this will run a build and then publish to surge, ensure you change the domain name to something else though :)

• Github Pages

  Github Pages has been used as the production site for the blog. This can be changed to something else however. In its place, anything else can be used. To publish to github pages, you can run the following command:

  yarn publish:prod

  this runs a buld and publishes to github pages.

  NB: Ensure that you change the homepage attribute in the package.json file to something else however.

  You may add a Google Analytics Tracking ID, however,this is not necessary. To do so you will need to add it as an environment variable ANALYTICS_TRACKING_ID in any of the .env.<ENVIRONMENT> of your choice. Sample environments have been provided to give more context:

  .
  ├── .env.development.sample
  ├── .env.production.sample
  ├── .env.staging.sample
  └── .env.testing.sample
  

  Some of the environments available

  In order to use any of them, simply rename the file you intend to use by removing the .sample suffix.

  The environment variables will be picked up at build time.

Built With

1. JavaScript Language - Programming language
2. ReactJS - JavaScript library for building UI.
3. Gatsby - Static site generator
4. Redux - Predictable State container for JS apps.
5. React-Redux - React Bindings for Redux

Versioning

SemVer is used for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

A hat tip to Unsplash for images and Html5Up for themes.