Comments (10)
There are two components- the utterances API (a node app) and the web site (static html/css/js site). I run the API on Azure and the web site on github pages.
To setup the API:
-
Create a new Azure Web App: https://portal.azure.com/#create/Microsoft.WebSite
The free tier will work. A paid tier will work better.
OS doesn't matter- windows or linux.
Under "deployment options", choose "local git".
Go back to the "general" tab and make note of the "git clone url" (eghttps://[username]@[app name].scm.azurewebsites.net:443/[app name].git
) and the "url" (eghttps://[app name].azurewebsites.net
). -
Create a new github app: https://github.com/settings/apps/new
Here are the fields that matter:field value GitHub App name your blog's name Description your blog's description Homepage URL your blog's url User authorization callback URL the url of your azure web app, with /authorized
appended. For example,https://my-awesome-blog.azurewebsites.net/authorized
Webhook URL It's a required field, but utterances doesn't use it. Pick anything... your blogs url... doesn't matter. Permissions Issues: Read & Write. No other permissions necessary. Where can this GitHub App be installed Only on this account Once you've created your app you'll be prompted to generate a private key. This is a required step. Utterances doesn't use the key so don't worry about remembering the value.
Make note of your github appsClient ID
andClient Secret
... you'll need those values later... -
Go back to your azure web app and navigate to the "application settings" tab, then scroll to the "application settings" area and add the following settings:
setting value BOT_TOKEN a personal access token with public_repo
scope that will be used when creating GitHub issues: generate here.CLIENT_ID The client id to be used in the GitHub OAuth web application flow. Copy from your GitHub App's page. CLIENT_SECRET The client secret for the OAuth web application flow. Copy from your GitHub App's page. STATE_PASSWORD 32 character password for encrypting state in request headers/cookies. Generate here. ORIGINS comma delimited list of permitted origins. For CORS. Enter https://[your github account].github.io,http://localhost:4000
)APP_ROOT Your azure web app's url (eg https://my-awesome-blog.azurewebsites.net
)USER_AGENT The GitHub API requires a User-Agent header. Put anything here... "my awesome blog"... whatever. -
Deploy the app...
git clone https://github.com/utterance/utterances-oauth cd utterances-oauth git remote add azure [the azure web app's git clone url from step 1] git push azure
-
Verify the app is running by going to
https://[app name].azurewebsites.net
... you should see blank page with the text "alive".
To setup the web site:
- Install yarn
- Fork this repo: https://github.com/utterance/utterances
- Clone your fork:
git clone https://github.com/[your-acount]/utterances
- Remove the
&& echo 'utteranc.es' > dist/CNAME
from this line:
Line 26 in a8707db
(this tells github pages what my custom domain name is... you won't need this) - Change this url to the url of your azure web app:
utterances/src/utterances-api.ts
Line 2 in a8707db
- Update some of the attributes here:
Lines 53 to 68 in 3d69c8b
Changesrc="https://utteranc.es/client.js"
tohttps://[your github account].github.io/utterances/client.js
Changerepo="..."
to whatever repo you're storing your blog comments in. - Execute
yarn start
, then go to http://localhost:4000/index.html and verify you're able to sign-in, post comments, etc. - Execute
yarn run deploy
to deploy to github pages. Then go tohttps://[your github account].github.io/utterances/
... verify you can sign-in, post comments, etc.
Let me know if you have any questions 🔮
from utterances.
We did a fork of utterances and rebuilt the oauth in node. https://github.com/sebgroup/yttringar-oauth
It's built for another usecase, but most of the logic is the same. Note that '/token' route is now a GET request instead of POST.
Good luck.
from utterances.
@Graborg isolation
from utterances.
Trying to self-host utterances-oAuth with Azure is not working. It seems you're using Cloudflare Workers now. Can you provide instructions on how to self-host it there?
from utterances.
Thank your help. 😄 I will do it.
from utterances.
@jdanyow Would self hosting allow this to work with private repos?
from utterances.
@jdanyow Would self hosting allow this to work with private repos?
+1 on using private repos.
from utterances.
Self hosting will not enable commenting on private repos. Comments are made using the commenting user's github account. If the repo is private users won't be able to create issue comments in the repo unless you had previously given them access to the repo.
from utterances.
Any reason the client code is implemented as an iframe?
from utterances.
So utterances-oauth is implemented as cloudflare-worker. To have a self-hosted solution it would be very nice to have a standalone server instance. Can we wrap it to run as ordinary node app?
from utterances.
Related Issues (20)
- Add a load button to comments
- is there a guide to add this to docusaurus ? HOT 1
- No links on nvidia shield tv for Hanime.tv
- Return Of The Max Doesn’t seems to work for me in Uk
- Utterances will not match to URLs exactly HOT 4
- Support flutter
- It seems that setting the theme to preferred-color-scheme doesn't work.
- Not issue HOT 3
- Use CSS variabel for theme switching
- Support for guest-comments HOT 1
- test
- Unable to setup utteranc.es HOT 1
- Is it possible to configure bot's initial post comment?
- Initial comment - needs better documentation HOT 1
- [Feature] Threading — nested responses.
- [Feature] Permalink to comments.
- 可以评论到Discussions吗? HOT 2
- Add Image Upload Options
- How to get around CORs HOT 1
- 404 on requesting css. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from utterances.