Giter Club home page Giter Club logo

hello-startup-site's Introduction

Hello, Startup Website

This is the website and mobile app for Hello, Startup: A Programmer's Guide to Building Products, Technologies, and Teams, an O'Reilly book by Yevgeniy Brikman.

Status

  • The Hello, Startup website is available at https://www.hello-startup.net.
  • Contributions, especially to the list of Startup Resources, are welcome via pull request (see instructions below).
  • The mobile app version is currently on pause as the market doesn't seem big enough for it.

Running the website

  1. Install grunt.js
  2. Install jekyll
  3. npm start
  4. http://localhost:4000

The grunt command runs grunt watch, which will watch for changes in the background and recompile everything as necessary. Jekyll is a bit slow, so it can take ~5 seconds for your changes to be visible.

Running with Docker

As an alternative to installing Ruby, Jekyll, and Grunt, if you're a user of Docker, you can run a Docker image of hello-startup-site that has all the dependencies already setup for you.

  1. git clone this repo
  2. docker-compose up
  3. Go to http://localhost:4000 to test

Architecture

  • jekyll: used to assemble static HTML from the HTML fragments in _layouts, _includes, _resources, and _data.
  • grunt.js: used to concatenate and minify CSS and JavaScript.
  • PhoneGap: used to package up the static HTML as iOS and Android apps.
  • GitHub Pages: for hosting the website.
  • CloudFlare: free SSL and CDN.
  • Bootstrap: for CSS, layout, general theme.
  • Font Awesome: for icons.

The Startup Resources

The Startup Resources are generated from YAML data files in the _data folder (see the Jekyll Data Files documentation for more info). These resources are a work in progress and I welcome contributions via pull request.

Each YAML file contains the information for one type of resource. For example, deployment.yml contains all the resources related to deploying code.

The basic format is:

name: "Name for this resource"
description: "Brief description of this resource."
icon: "The name of one of the Font Awesome icons to represent this resource."
type: "one of: products, technologies, or teams"
categories:
  - id: "a-unique-id-for-this-category"
    name: "Human readable name for the category"
    sites: # List of websites for this category
      - name: "Website #1"
        url: "https://www.website-number-one.com/"
        image: "screenshot1.jpg" # 800x400 screenshot under images/resources
        description: "A brief description of website #1"
      - name: "Website #2"
        url: "https://www.website-number-two.com/"
        image: "screenshot2.jpg" # 800x400 screenshot under images/resources
        description: "A brief description of website #2"

See the _data folder for lots of examples.

Running the mobile app

Note: mobile app development has been put on pause and may not work any more

  1. Install PhoneGap
  2. Install the PhoneGap Developer App on your computer and the mobile app for your phone.
  3. Run grunt as explained in the "Running the website" instructions. This will assemble all of the HTML.
  4. Add a new project to the PhoneGap Developer App by adding the mobile folder (which has config.xml).
  5. At the bottom of the PhoneGap Developer App, it should tell you that the project is running and the URL. Connect to this URL in the PhoneGap mobile app on your phone.
  6. If you want to build the app for real, use PhoneGap Build.

Making PhoneGap and Jekyll work together

Both PhoneGap and Jekyll require a specific folder structure, and those are not mutually compatible. To make this all work using the same content in the same repo, I've used a bit of a hack with symlinks:

  1. PhoneGap's config.xml and index.html are in the mobile folder.
  2. Everything else is in the normal Jekyll locations (e.g. _includes, _layouts, javascripts, stylesheets). All of these files get compiled into the normal Jekyll output folder (_site).
  3. I've added symlinks from the mobile/www folder to _site. Therefore, if you point PhoneGap at the mobile folder, it will see the folder structure it expects.
  4. Since _site is normally generated by the Jekyll build process, you don't usually check it in. However, I had to in this case, or the symlinks won't work, which causes an error when GitHub Pages tries to build the site. Therefore, I've checked in a few placeholder files that ensure the folders we symlink to exist.

hello-startup-site's People

Contributors

brikis98 avatar kidk avatar mcalhoun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hello-startup-site's Issues

Generated static content in dist folder doesn't work with Docker

This project uses grunt to compile, concatenate, and minify static content into the dist folder. This works fine when running everything locally, but when running the site in a Docker container with only one-way syncing, you have no easy way to get the updated dist folder and check it in. Easiest workaround is to not use Docker. Alternatively, you can run the following command to manually copy the dist folder back to the host machine:

docker cp <CONTAINER_ID>:/src/dist .

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.