This is the repository of the the 6th column project website.
The generated website is served out of the gh-pages
branch of this repository.
src/pages/index.tsx
is the entry point.
This Website is generated with Gatsby. Gatsby is written in JavaScript and uses React and GraphQL.
To set up your system you will need to install node.
Once node is installed, install Gatsby (globally).
npm install -g gatsby-cli
You will also need the gh-pages
module installed before you can make any changes.
(:warning: Do the following command from the root directory of this project)
npm install gh-pages
- Clone this repository (be sure you have the dependencies โ๏ธ. Particularly
gh-pages
) - Make changes to the files under the
src/pages/
directory. - You may make changes to the sytlesheets in the
src/css/
directory.
Launch an http server on localhost.
Using the following command you will launch a gatsby's node.js http server. It will update as you develop
๐ the site.
(:warning: Do the following command from the root directory of this project)
gatsby develop
once the server starts up
mgf@serenity:[The6thColumnProject.github.io]:[main$โ]:[89228]> gatsby develop
success open and validate gatsby-configs - 0.026s
success load plugins - 1.272s
success onPreInit - 0.008s
success initialize cache - 0.013s
success copy gatsby files - 0.057s
success onPreBootstrap - 0.008s
success createSchemaCustomization - 0.026s
success source and transform nodes - 0.133s
success building schema - 0.297s
success createPages - 0.038s
success createPagesStatefully - 0.060s
success onPreExtractQueries - 0.004s
success update schema - 0.026s
success extract queries from components - 0.284s
success write out requires - 0.033s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.002s
success onPostBootstrap - 0.019s
โ
info bootstrap finished - 7.124 s
โ
success run queries - 0.188s - 8/8 42.49/s
warn Browserslist: caniuse-lite is outdated. Please run next command `npm update`
โ
You can now view The 6th Column Project in the browser.
โ
http://localhost:8000/
โ
View GraphiQL, an in-browser IDE, to explore your site's data and schema
โ
http://localhost:8000/___graphql
โ
Note that the development build is not optimized.
To create a production build, use gatsby build
โ
success Building development bundle - 5.856s
Then point your browser to http://localhost:8000
to view the rendered site.
You may build (generate) the site explicitly by running...
gatsby build
When you are satisfied with your changes and want to publish the changes to the live, external site run...
npm run deploy
This will generate and push the site to this project's gh-pages
branch for it to be served.
- Gatsby 2.0 (alpha)
- sharp
- offline support
- google analytics
- manifest
- typescript
- blog in markdown
- Best practices tools
- Jest / Enzyme
- Storybook
- Typescript / tslint
- xo linter
- Remark-lint
- Husky & lint-staged for autofix each commit
- Travis/AppVeyor config (unix-osx-windows CI)
- Code climate config
- SEO
- Semantic-ui for styling
- Lazyboy tools
- plop templates ->
npm run generate
- plop templates ->
.
โโโ data // website data (included into graphQL)
โ โโโ author.json // list of blog authors
โ โโโ avatars // authors avatars
โ โโโ blog // all blog data (posts, images)
โโโ gatsby-config.js // gatsby configuration
โโโ gatsby-node.js // gatsby node hooks
โโโ generators // generators (`npm run generate`)
โ โโโ blog-post-generator.js // `blog post` generator
โ โโโ component-generator.js // `component` generator
โ โโโ page-generator.js // `page` generator
โ โโโ plopfile.js // generators entry
โ โโโ templates // all templates (handlebar notation)
โ โโโ utils.js // utils scripts for generators
โโโ package.json
โโโ public // output folder (in .gitignore)
โโโ README.md // this file
โโโ src // sources
โ โโโ components // all react components
โ โโโ css // styles
โ โโโ declarations.d.ts // declarations for no typescript modules/files
โ โโโ graphql-types.d.ts // graphql types (`npm run graphql-types`)
โ โโโ html.tsx // main html (required)
โ โโโ layouts // layouts
โ โ โโโ default.tsx // default layout (required)
โ โโโ pages // all pages
โ โโโ templates // all templates (used for procedural page creation, see `gatsby-node.js`)
โโโ tools // miscs tools for dev
โ โโโ update-post-date.js // update post date hook
โโโ tsconfig.json // typescript configuration
โโโ tslint.json // tslint configuration
โโโ package-lock.json // npm lock file
To avoid any boring copy/paste, this starter-kit have many generators to permit simple bootstrap of current file pattern (eg. components/pages/blog posts). e.g. to add a new blog post first add the authors to data/authors.json and add authors' images to the data/avatars folder. Next execute 'npm run generate' and select 'Blog post'. Follow the prompts for a new post. Each blog post requires an image be added to the /data/blog/ folder prior to running 'gatsby develop'.
You can add/delete/modify any generators into /generators
folder.
Be lazy and have fun!
Copyright ยฉ 2012-2021 The 6th Column Group, LLC [email protected]