Giter Club home page Giter Club logo

thingoftheday's Introduction

Screenshot of thingoftheday.xyz

thingoftheday

A lightweight microblogging site powered by Contentful and vanilla HTML, CSS and JavaScript

Visit thingoftheday

Visit the tutorial article

If you've forked the repo and set up your own thingoftheday microblog, I'd love to share it with the world! โœจ ๐Ÿ˜Ž

Find me on Twitter and say hello! ๐Ÿ‘‹๐Ÿผ

Useful links

Contentful GraphiQL Playground:

https://graphql.contentful.com/content/v1/spaces/{YOUR_SPACE_ID}/explore?access_token={YOUR_ACCESS_TOKEN}


Want to build your own thingoftheday?

Follow this quick setup guide to get started in minutes!

We're going to make some small changes to some handy files in the ./setup directory, and use the Contentful CLI to import the content model and example content provided into your own Contentful space.

Step 1: Get the code

Fork this repository to your GitHub account, and clone it to your local machine using git or the GitHub CLI.


Step 2: Get Contentful

Create your Contentful account. Sign up here.


Step 3: Get credentials

  • Create a new space inside your Contentful account
  • Go to Settings > General Settings and make a note of the Space ID
  • Go to Settings > API keys and generate an access token for the Content Delivery API
  • Add your Space ID and access token to ./setup/credentials.js

Step 4: Install the Contentful CLI

Using homebrew:

brew install contentful-cli

Using npm:

npm install -g contentful-cli

Using yarn:

yarn global add contentful-cli

Step 5: Authenticate with the CLI

Run contentful login in your terminal and follow the instructions in your browser.


Step 6: Run the import

Import the content model and example post to your Contentful space.

Access the Contentful CLI docs on importing/exporting data here.

::TLDR

Run the following command in your terminal, ensuring you switch out SPACE_ID for your new Space ID.

cd /path/to/repo/thingoftheday/setup

contentful space import --space-id SPACE_ID --content-file contentful-export.json

The terminal will do some fancy things. If all looks good - refresh Contentful in your browser and you'll find the content model and example post has been imported for you! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰


Step 7: Run the application

thingoftheday uses no frameworks and is powered by vanilla HTML, CSS and JavaScript!

To be able to serve the JS module to the browser, you'll need to serve the files over a local http server.

You can do this really nicely with this http-server package.

Install http-server globally, and start the development server locally by running:

cd path/to/repo
npx http-server

And you're done

With your http server started, your credentials file configured, and your content model imported, you'll be able to visit your very own thingoftheday microblog in your browser - all within minutes.

BONUS CONTENT

Generate an RSS feed of the content by hitting the following url:

https://{hostname}/.netlify/functions/rss

The RSS feed for thingoftheday.xyz is available here.

And remember:

Build stuff, learn things, love what you do

thingoftheday's People

Contributors

whitep4nth3r avatar toefrog avatar billyroebuck avatar

Watchers

James Cloos avatar

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.