Code Monkey home page Code Monkey logo

twitchett.github.io's Introduction

Build Status

Hello

This is Jekyll site built on top of the jekyll-uno theme, with a few static pages, a blog, and a React image gallery. The app pulls content from my Instagram and uses the excellent react-images to view the images.

This is definitely not an example of how to build a maintainable site. The code is not pretty: it's experimental, and cobbled together using a number of langauges, frameworks, scripts, and several hacks.

Build

There's a two stage build process: webpack transpiles and bundles the Javascript under /react and puts the bundle in /src/js, then Jekyll builds everything under /src and dumps the static site in /build. "Deploying" is a simple matter of pushing the contents of /build to the master branch.

Local set up

bundle install to install the Ruby gems.

npm install followed by npm start to start the jekyll server. The site will be available at localhost:4000.

Updating the Instagram gallery

This is a manual process at the moment (until the site is migrated off GitHub Pages) that can be triggered by running:

npm run scrape

This calls a PHP script that uses instagram-php-scraper to pull the data from instagram, and writes the necessary properties to a JSON file at src/_data/instadump.json.

Pushing changes to the live site

From the source branch, first build the production version using:

npm run build-prod

The site will be built to .site. Then run:

npm run deploy

to perform all the git-juggling and push to master.

twitchett.github.io's People

Contributors

twitchett avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

twitchett.github.io's Issues

To Dos

Refactors:

  • build the navigation links in a cleverer way

New stuff:

  • travis setup
  • some tests would be nice
  • url routing for the image gallery
  • nice transitions for lightbox
  • something for the readme
  • minify js & css

Fixes:

  • update build script for copying static site over to master branch
  • nav button widths on mobile menu
  • horizontal scrollbar whilst lightbox is active

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.