Discord messages as an webpage

I wanted to use discord as a place to dump coding memes, notable application I discover, and interesting libraries. However I dislike discord’s search system and wanted to have the channels slightly more accessible and indexable by search engines so I created this generated static site using eleventy which starts up a temporary discord bot to fetch messages from specific channels.

Demo (feel free to scroll through memes and links):

Features:

  • Image attachments are embed via proxy

  • Uses channel ids so you can change your channel names if needed and the new names will also be synced.

  • Separation of dark theme code from essential code (inspired by glitch in bio themes)

  • Smooth scrolling for links to the site that reference a specific channel or message

  • You can have the page scroll to a specific channel by either referencing it’s name
    #intresting-libraries-and-frameworks
    or it’s id memes channel.

  • Allows linking messages by their id
    Discord to the public web!

Customisation and setup

  1. Go to discord.com/developers and make a new application with a bot and put the token in .env
  2. Invite the bot to your server and make sure it can read messages
  • Configuration of channels can be done in config.js under src
  • For in depth configuration of the html structure take a look at index.hbs in src
  • For css changes either make a new folder in public or append to global.css
  • The dark theme code is darkening.css of public
4 Likes

This could also be a potential way to archive Discord messages on the web.

2 Likes

I’d have to probaly adapt your jsoning library or hook up a large database for that since my json file has corrupted at least twice when I killed the app at the wrong time.

1 Like

nice! FYI I made a similar page forwarding contents from discord as an online exhibition before (currently it’s showing the static version)

https://netze.glitch.me/

While I used node.js as a discord crawler, your implementation looks much cleaner! congrats!

2 Likes